Jquery宽松和动画

Question

我从here中抓住了这个小巧的新闻阅读器下面是在点击链接时为预览提供轻松和轻松的动画代码。我将整个页面的尺寸从300更改为600.我做了一些Google搜索，并且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; 
       }); 
      }); 

Answer 1

III族解释;

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

所以换句话说，该功能没有按”做任何事情都很聪明。它动画和最终它跳转到不同的地方无论如何.. 不管，希望我帮助:)