0

我从这里抓取了这个紧凑的新闻阅读器下面是在单击链接时动画缓入和缓出预览的代码。我将整个页面的尺寸从 300 的高度更改为 600。我做了一些谷歌搜索，jquery 的动画部分为元素的 CSS 属性设置了动画。所以我从那里开始工作。以为我有工作，但我没有，所以我想我会从头开始。

任何人都可以解释这一点吗？例如，我只是在猜测，“将页面元素的顶部 css 设置为 -300px ......我不明白的其余部分。

感谢您的任何帮助、骚扰或指点。

$current.stop().animate({'top':'-300px'},600,'easeOutBack',function(){
                            $(this).css({'top':'310px'});

sdfadssf

            $items.each(function(i){
                var $item = $(this);
                $item.data('idx',i+1);

                $item.bind('click',function(){
                    var $this       = $(this);
                    $cn_list.find('.selected').removeClass('selected');
                    $this.addClass('selected');
                    var idx         = $(this).data('idx');
                    var $current    = $cn_preview.find('.cn_content:nth-child('+current+')');
                    var $next       = $cn_preview.find('.cn_content:nth-child('+idx+')');

                    if(idx > current){
                        $current.stop().animate({'top':'-300px'},600,'easeOutBack',function(){
                            $(this).css({'top':'310px'});
                        });
                        $next.css({'top':'310px'}).stop().animate({'top':'5px'},600,'easeOutBack');
                    }
                    else if(idx < current){
                        $current.stop().animate({'top':'310px'},600,'easeOutBack',function(){
                            $(this).css({'top':'310px'});
                        });
                        $next.css({'top':'-300px'}).stop().animate({'top':'5px'},600,'easeOutBack');
                    }
                    current = idx;
                });
            });
4

1 回答 1

5

生病解释;

$current. //the element you are on
    stop(). //stop all running animations
    animate( //start a new animation
        {'top':'-300px'}, //animate till this element's top style is -300px
        600, //the animation will take 600ms
        'easeOutBack', //it will use the EaseOutBack easing function
        function(){ //callback, that gets called as soon as the animation finishes
            $(this).css({'top':'310px'}); //set the element's top style to 310px
        }
    );

所以换句话说，这个函数并没有做任何非常聪明的事情。它有动画效果，最后它还是跳到了另一个地方..不管怎样，希望我能帮上忙:)

于 2012-01-22T14:48:50.733 回答