jquery animate（）問題

Question

我創建了一個jQuery動畫，當你點擊其中一個按鈕時，隱藏的div從left: -650px;滑到left: 0px;click here to see example但是我注意到當你點擊另一個按鈕來揭示另一個隱藏div時， div不會回到它原來的位置left: -650px;它留在左邊：0;有沒有人知道我需要添加爲了實現這個...？

HTML：

<div id="wrapper"> 
    <div class="top-block"> 
     <ul> 
      <li><a id="one" href="#" class="proBtn">block</a> 
      </li> 
      <li><a id="two" href="#" class="proBtn">test</a> 
      </li> 
      <li><a id="three" href="#" class="proBtn">test</a> 
      </li> 
      <li><a id="four" href="#" class="proBtn">Lists</a> 
      </li> 
      <li><a href="#" class="proBtn">hello</a> 
      </li> 
      <li><a href="#" class="proBtn">test</a> 
      </li> 
     </ul> 
     <!-- HOME SECTION --> 
     <div id="one-bck" class="mid-block fadeInLeft" style="background:green;"></div> 
     <div id="two-bck" class="mid-block fadeInLeft" style="background:red;"></div> 
     <div id="three-bck" class="mid-block fadeInLeft"></div> 
     <div id="four-bck" class="mid-block fadeInLeft"></div> 
    </div> 
</div> 

JS

$(document).ready(function() { 
    $('.proBtn').click(function() { 
     $('li').removeClass('active'); 
     $('li a').removeClass('blue'); 
     $(this).parent("li").addClass('active'); 
     $(this).addClass('blue'); 
    }); 

    $('#one').click(function() { 
     $('#two-bck').animate({ 
      left: '-650px;', 
      opacity: 0 
     }, 500).removeClass('animated'); 
     $('#three-bck').animate({ 
      left: '-650px;', 
      opacity: 0 
     }, 500).removeClass('animated'); 
     $('#four-bck').animate({ 
      left: '-650px;', 
      opacity: 0 
     }, 500).removeClass('animated'); 
     $('#one-bck').addClass('animated').animate({ 
      left: '0px', 
      opacity: 1 
     }, 500); 
    }); 

    $('#two').click(function() { 
     $('#one-bck').animate({ 
      left: '-650px;', 
      opacity: 0 
     }, 500).removeClass('animated'); 
     $('#three-bck').animate({ 
      left: '-650px;', 
      opacity: 0 
     }, 500).removeClass('animated'); 
     $('#four-bck').animate({ 
      left: '-650px;', 
      opacity: 0 
     }, 1500).removeClass('animated'); 
     $('#two-bck').addClass('animated').animate({ 
      left: '0px', 
      opacity: 1 
     }, 500);; 
    }); 

    $('#three').click(function() { 
     $('#one-bck').animate({ 
      left: '-650px;', 
      opacity: 0 
     }, 500).removeClass('animated'); 
     $('#two-bck').animate({ 
      left: '-650px;', 
      opacity: 0 
     }, 500).removeClass('animated'); 
     $('#four-bck').animate({ 
      left: '-650px;', 
      opacity: 0 
     }, 500).removeClass('animated'); 
     $('#three-bck').addClass('animated').animate({ 
      left: '-650px;', 
      opacity: 0 
     }, 500); 
    }); 

}); 

Answer 1

除了修正css和removeClass問題之外，您可以嘗試簡化它。而不是將事件處理程序綁定到每個ID都可能成爲一個令人頭痛的問題，因爲它們都做同樣的事情。您可以將數據屬性添加到錨標記，例如data-target="#three-bck"並選擇它們進行動畫。它可以全部進入一個事件處理程序。

HTML：

 <ul> 
     <li><a id="one" href="#" class="proBtn" data-target="#one-bck">block</a> 

     </li> 
     <li><a id="two" href="#" class="proBtn" data-target="#two-bck">test</a> 

     </li> 
     <li><a id="three" href="#" class="proBtn" data-target="#three-bck">test</a> 

     </li> 
     <li><a id="four" href="#" class="proBtn" data-target="#four-bck">Lists</a> 

     </li> 
     <li><a href="#" class="proBtn">hello</a> 

     </li> 
     <li><a href="#" class="proBtn">test</a> 

     </li> 
    </ul> 

JS：

$(document).ready(function() { 
    $('.proBtn').click(function() { 
     $('li').removeClass('active').find('a').removeClass('blue'); //chain it 
     var $this = $(this); //cache this first 
     $this.addClass('blue').closest("li").addClass('active'); 

     $('.mid-block.animated').animate({ //start animate for reverse in case if there is anything already selected 
      left: '-650px', 
      opacity: 0 
     }, 500, function(){ 
      $(this).removeClass('animated'); //once done remove its class 
     }).promise().done(function() { //once this is done start animating your target by selecting the target element from its own data attribute 
      $($this.data('target')).addClass('animated').stop(true, true).animate({ 
       left: '0px', 
       opacity: 1 
      }, 500); 
     }); 
    }); 
}); 

Fiddle

Answer 2

上left:'-650px;'的 'PX' 後刪除分號。

應該只是left:'-650px'。