jquery - 如何在 onClick 事件中滑动元素，然后在单击另一个元素时将该元素滑回原始位置

Question

我使用 jQuery animate() 来处理效果。我遇到的问题是 div 再次打开和关闭而没有暂停，或者元素继续向左滑动。

我试过的：

var inView;
$('.contentBox').click(function(e){
 inView = false;
 var tmp_div = $(this).parent().index();
 if(inView == false){
    $('.details div').eq(tmp_div).show().animate({"left": "+=4000"}, "slow");
    inView = true;

 }
 if(inView == true){
     $('.details div').eq(tmp_div).show().animate({"left": "-=4000"}, "slow");
             inView = false;
 }
});

Answer 1

您的代码if else目前需要一个因为它会触发两组动画。此外，由于 var 是在 click 函数中设置的，因此它始终为 false。您希望它运行两次元素点击，因此您最有可能需要两次点击事件。所以这样的事情可能对你有用，尽管很难用所提供的有限描述来理解。

var inView = false;
$('#element1').click(function(e){
     var tmp_div = $(this).parent().index();
     if(inView == false){
        $('.details div').eq(tmp_div).show().animate({"left": "+=4000"}, "slow");
        inView = true;

     }
});
$('#element2').click(function(e){
     var tmp_div = $(this).parent().index();
     if(inView == true){
         $('.details div').eq(tmp_div).show().animate({"left": "-=4000"}, "slow");
         inView = false;
     }
});