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大小。

這對瀏覽器來說還是很多工作，但它應該會改進。它也會有額外的好處，不是真的複雜！