jQuery的动画宽度增加从中间

Question

您好我我只是最近才开始学习jQuery和而搞乱以防万一，我开始从球泡一个scratch.This效果灯箱是我的代码：

$(document).ready(function(){ 
      $('a').click(function(){ 


       $('<div id="overlay"></div>').css({opacity:'0' }) 
         .animate({ opacity:'0.7' 
         },1500) 
         .appendTo('body'); 
       $('<div id="container"></div>').css({ 
                backgroundColor:'white', 
                opacity:'0' 

               }) 
               .animate({ 
                 left:'470px', 
                 top:'150px' 
               },'fast') 
               .animate({ 
                 opacity:'1' 
               }) 
               .animate({ 
                 height:'+=255px' 
                 },1000,'swing') 
               .animate({ 
                 width:'+=350px' 
                 },1000,'swing') 
               .animate({ 
                 height:'+=50px' 
                 },1000,'swing') 

               .appendTo('body'); 
       $('<img/>').attr('src',$(this).attr('href')).appendTo('div#container'); 

       return false; 
      }); 


     }) 

虽然试图设置DIV的中心，我创建2个变量：

var left = ($(window).width() - $('div#container').width())/2 
var top = ($(window).height() - $('div#container').height())/2 

这些形式给出的问题是div的初始宽度和高度设置为50像素，因此座标与他们在第一时间拿到并在居中动画的其余部分继续运行容器isent。

我最初想到的是试图使容器的两侧和中间的高度保持居中。

我怎样才能实现这一目标？我想一个解决方案这么想的依赖于外部插件除了jQuery的UI.Thank您

Answer 1

我想你需要根据新的宽度做的是计算你的中心是什么/高度CSS值，然后根据这些坐标的变化来翻译框，使其看起来保持居中。我没有时间制作js小提琴，但是您可以向动画添加左右值。

var new_left = ($(window).width() - //final width value)/2; 
var new_top = ($(window).height() - //final height value)/2; 

，然后添加的东西动画，如：

.animate({ 
      left:new_left, 
      top:new_top 
      }, //time interval , //method);