Question

嗨，我，我刚刚开始学习jQuery，当我开始搞乱时，我开始从头开始制作一个灯箱效果。这是我的代码：

  $(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的初始宽度和高度设置为50px，因此coodinates将它与第一次获得的内容居中，当动画的其余部分运行时，容器将再次居中。

首先考虑的是试图使容器的高度和高度从两侧的midle开始，使其保持居中。

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

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);

jQuery动画宽度从中间增加

1 个答案: