JQuery 动画生涩

Question

我创建了一个扩展 DIV (contentright) 以及 DIV 何时扩展。我也在扩展一些图像。当这个动画发生时。它是生涩的，不光滑。我知道我正在同时执行一些动画。但是我现在应该能够使这项工作顺利进行吗？

我更新到最新的 jquery 版本 1.7.1，这对一些人有所帮助。

在这里您可以看到正在运行的页面： http://4wproductions.com/reels.php

// JavaScript Document
$(document).ready(function() {
var Toggled = false;
if ($('#homepage').length > 0) {
  $('.mframe').css('display', 'none');
  $('.header').css('width', 0);
  $('.footer').css('width', 0);
  $('.hcontact').css('display', 'none');
  $('.fwlogo').css('display', 'none');
  $('.menuframe').css('height', 0);
  $('.menuframebg').css('backgroundColor', '#FFFFCC');
  $('.footerbg').css('background-color', '#FFFFCC');
  $('.footertext').css('display', 'none');
  $('.menuback').hide(0);
  $('.menuback').css('height', 0);
  $('.menuback').css('top', 445);
  $('.menudivide').css('width', 0);
  $('.menudividesocial').css('display', 'none');
  $('.menulink').css('display', 'none');
  $('.contentright').css('display', 'none');
  $('.contentcolumn').css('display', 'none');
  $('.focusmenu').css('display', 'none');
  $('.focusmenuf').css('display', 'none');
  $('.focusmenul').css('display', 'none');
  $('.adfooter').css('display', 'none');
  $('.copy').css('display', 'none');
  $('.mframe').fadeIn(450, 
  function() { $('.header').animate({width: '770px'}, 550);
  $('.footer').animate({width: '770px'}, 550, 
  function() { $('.menuframe').animate({height: '360px'}, 550);
  $('.footerbg').animate({backgroundColor: '#9FAD3D'}, 750);
  $('.footertext').fadeIn(750);
  $('.fwlogo').fadeIn(750);
  $('.hcontact').fadeIn(750,    
  function() { $('.menuback').show(0);
  $('.menuback').animate({height: '360px', top: '85px'}, 400); 
  $('.menudivide').animate({width: '259px'}, 450);
  $('.menuframebg').animate({backgroundColor: '#F1E190'}, 450, 
  function() { $('.menulink').fadeIn(450);
  $('.menudividesocial').fadeIn(450);
  $('.contentright').fadeIn(700, 
  function() { $('#column1').fadeIn(400, 
  function() { $('#column2').fadeIn(400, 
  function() { $('.focusmenu').fadeIn(800);
  $('.focusmenuf').fadeIn(800);
  $('.focusmenul').fadeIn(800, 
  function() { $('.adfooter').fadeIn(500, 
  function() { $('.copy').fadeIn(500)
  });
  });
  });
  });
  });
  });
  });
  });
  });
} else if ($('#about').length > 0) {
    $('.contentrighttext').css('display', 'none');
    $('#contenth1').css('display', 'none');
    $('.contentrighttext').fadeIn(2000);
    $('#contenth1').fadeIn(2000);
} else if ($('#services').length > 0) {
    $('#contenth1').css('display', 'none');
    $('#contentlmenu1').css('display', 'none');
    $('#contentlmenu2').css('display', 'none');
    $('#contentlmenu3').css('display', 'none');
    $('#contentlmenu4').css('display', 'none');
    $('#commercials').css('display', 'none');
    $('#commercialsimg').css('display', 'none');
    $('#filmsimg').css('display', 'none');
    $('#locationsimg').css('display', 'none');
    $('#marketingimg').css('display', 'none');
    $('#films').css('display', 'none');
    $('#locations').css('display', 'none');
    $('#marketing').css('display', 'none');
    $('#contenth1').fadeIn(1500, 
    function() { $('#contentlmenu1').slideToggle(400, 
    function() { $('#contentlmenu2').slideToggle(400, 
    function() { $('#contentlmenu3').slideToggle(400,
    function() { $('#contentlmenu4').slideToggle(400)
    });
    });
    });
    });
    $('#contentmenu1').click( function() {
        $('#contentlmenu2').slideToggle(400);
        $('#contentlmenu3').slideToggle(400); 
        $('#contentlmenu4').slideToggle(400);
        if (Toggled == false) {
            $(this).text('<');
            Toggled = true;
            $('#commercialsimg').fadeIn(800);
        } else {
            $(this).text('>');
            Toggled = false;
            $('#commercialsimg').hide(200);
            }
                $('#commercials').fadeToggle(600);
        });
        $('#contentmenu2').click( function() {
            $('#contentlmenu1').slideToggle(600); 
            $('#contentlmenu3').slideToggle(600); 
            $('#contentlmenu4').slideToggle(600);
            if (Toggled == false) {
                $(this).text('<');
                Toggled = true;
                $('#filmsimg').fadeIn(800);
            } else {
                $(this).text('>');
                Toggled = false;
                $('#filmsimg').hide(200);
            }
            $('#films').fadeToggle(600);
        });
        $('#contentmenu3').click( function() {
            $('#contentlmenu1').slideToggle(600); 
            $('#contentlmenu2').slideToggle(600); 
            $('#contentlmenu4').slideToggle(600);
            if (Toggled == false) {
                $(this).text('<');
                Toggled = true;
                $('#locationsimg').fadeIn(800);
            } else {
                $(this).text('>');
                Toggled = false;
                $('#locationsimg').hide(200);
            }
            $('#locations').fadeToggle(600);
        });
        $('#contentmenu4').click( function() {
            $('#contentlmenu1').slideToggle(600); 
            $('#contentlmenu2').slideToggle(600); 
            $('#contentlmenu3').slideToggle(600);
            if (Toggled == false) {
                $(this).text('<');
                Toggled = true;
                $('#marketingimg').fadeIn(800);
            } else {
                $(this).text('>');
                Toggled = false;
                $('#marketingimg').hide(200);
            }
            $('#marketing').fadeToggle(600);
        });
    } else if ($('#projects').length > 0) {
        $('#contenth1').css('display', 'none');
        $('#contentlmenu1').css('display', 'none');
        $('#contentlmenu2').css('display', 'none');
        $('#sc_graphicimg').css('display', 'none');
        $('#twosouls_graphicimg').css('display', 'none');
        $('#sc_graphic').css('display', 'none');
        $('#twosouls_graphic').css('display', 'none');
        $('#contenth1').fadeIn(1500, 
        function() { $('#contentlmenu1').slideToggle(400, 
        function() { $('#contentlmenu2').slideToggle(400)
        });
        });
        $('#contentmenu1').click( function() {
            $('#contentlmenu2').slideToggle(600); 
            if (Toggled == false) {
                $(this).text('<');
                Toggled = true;
                $('#sc_graphicimg').fadeIn(800);
            } else {
                $(this).text('>');
                Toggled = false;
                $('#sc_graphicimg').hide(200);
            }
            $('#sc_graphic').fadeToggle(600);
        });
        $('#contentmenu2').click( function() {
            $('#contentlmenu1').slideToggle(600); 
            if (Toggled == false) {
                $(this).text('<');
                Toggled = true;
                $('#twosouls_graphicimg').fadeIn(800);
            } else {
                $(this).text('>');
                Toggled = false;
                $('#twosouls_graphicimg').hide(200);
            }
            $('#twosouls_graphic').fadeToggle(600);
        });
    } else if ($('#reels').length > 0) {
        $('.bvideot').fadeOut(0);
        $('#contenth1').css('display', 'none');
        $('.vimeopreview').css('display', 'none');
        for (i=1; i <=tvideo; i++) {
        $('#v' + i).css('display', 'none');
        }
        $('#videoexpand').fadeOut(0);
        $('#videocollapse').fadeOut(0);
        $('#contenth1').delay(600).fadeIn(1500,
        function() {
        $('.vimeopreview').css('display', 'inline-block');
        $('.videoplayer').css('top', '120px');
        $('.videoplayer').css('left', '120px');
        $('.vimeoptext').css('width', '700px');
            $('.contentright').animate({
                top: '15px',
                right: '25px',
                width: '720px',
                height: '500px'
            }, 1500,
            function() {
                $('.contentright').css('border', '1px solid #CC9900');
                $('#videocollapse').fadeIn(500);
            });
            $('.contentrighttext').animate({
                width: '690px',
                height: '465px'
            }, 1500);
            $('.vimeopreview').animate({
                width: '125px',
                height: '110px'
            }, 1500);
            $('.videolink img').animate({
                width: '125px',
                height: '110px',
                'max-width' : '125px',
                'max-height' : '100px'
            }, 1500);
        });
        $('#videocollapse').click(
        function() {
            $('.contentright').css('border', 'none');
            $('.videoplayer').css('top', '45px');
            $('.videoplayer').css('left', '10px');
            $('.vimeoptext').css('width', '490px');
            $('.contentright').animate({
                top: '85px',
                right: '0px',
                width: '510px',
                height: '320px'
            }, 1500);
            $('.contentrighttext').animate({
                width: '480px',
                height: '285px'
            }, 1500);
            $('.vimeopreview').animate({
                width: '65px',
                height: '50px'
            }, 1500);
            $('.videolink img').animate({
                width: '65px',
                height: '50px',
                'max-width' : '65px',
                'max-height' : '50px'
            }, 1500);
            $('#videocollapse').fadeOut(500, 
            function() {
                $('#videoexpand').fadeIn(500)
            });
        });
        $('#videoexpand').click(
        function() {
            $('.videoplayer').css('top', '120px');
            $('.videoplayer').css('left', '120px');
            $('.vimeoptext').css('width', '700px');
            $('.contentright').animate({
                top: '15px',
                right: '25px',
                width: '720px',
                height: '500px'
            }, 1500,
            function() {
                $('.contentright').css('border', '1px solid #CC9900');
            });
            $('.contentrighttext').animate({
                width: '690px',
                height: '465px'
            }, 1500);
            $('.vimeopreview').animate({
                width: '125px',
                height: '110px'
            }, 1500);
            $('.videolink img').animate({
                width: '125px',
                height: '110px',
                'max-width' : '125px',
                'max-height' : '100px'
            }, 1500);
            $('#videoexpand').fadeOut(500,
            function() {
              $('#videocollapse').fadeIn(500);
            });
        });
        $('.videolink').hover(
        function() {
            var vt = this.id;
            $('#' + vt + 'text').css('display', 'block');
        },
        function() {
            var vt = this.id;
            $('#' + vt + 'text').css('display', 'none');
        });
        $('.videolink').click(
        function() {
            var id = $(this).attr("id");
            var idn = id.match(/[0-9]+/);
            $('.vimeopreview').fadeOut(600, 
              function() { $('#v' + idn).fadeIn(600)
            });
        });
        $('.vlinkback').click(
        function() {
            var bid = $(this).attr("id");
            var bidn = bid.match(/[0-9]+/);
            $('#v' + bidn).fadeOut(600, 
              function() { $('.vimeopreview').fadeIn(600)
            });
        });
    }
});

Answer 1

您可以尝试将外部 div 内的所有内容切换为百分比宽度，而不是固定宽度，然后更改为外部 div 大小。

对于浏览器来说还有很多工作要做，但应该会有所改进。它还有一个额外的好处，那就是不真的复杂！