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

所以換句話說，該功能沒有按」做任何事情都很聰明。它動畫和最終它跳轉到不同的地方無論如何.. 不管，希望我幫助:)