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'。