Question

我的身体中有一个元素，我可以使用此功能进行动画处理：

$(function(){
    $("#telefonofisso").click(function(){
        if ($("#telefonofisso").hasClass('negative')) {
            $(this).delay(400).animate({right:'10px'},1000).addClass('positive').removeClass('negative')
        }
    });
})

但如果我再次点击它，我无法让它恢复到原来的right:-210px位置。我尝试使用以下功能：

$(function(){
   $("#telefonofisso").click(function(){
    if ($("#telefonofisso").hasClass('positive')) {
         (this).delay(400).animate({right:'-210px'},1000).addClass('negative').removeClass('positive')
    }
  });
})

但是这个功能在我第二次点击之前激活，所以我的元素，如果我点击它，从right:-210px开始，转到right:10px而不是返回到right:-210px一键。

我该如何解决这个问题，为什么会这样呢？我无法理解为什么会这样做。因为理论上触发器是单击，第二个函数只应该在我第二次单击时起作用，对吗？

Answer 1

试试这个：

$(function(){
   $("#telefonofisso").click(function(){
    if ($("#telefonofisso").hasClass('positive')) {
        $(this).delay(400).animate({right:'-210px'},1000)
              .addClass('negative').removeClass('positive');
    } else {
        $(this).delay(400).animate({right:'10px'},1000)
              .addClass('positive').removeClass('negative');      
    }
  });
});

这将解决您的问题。

你忘记了第二次电话中的$ sign。

Answer 2

根据您的要求尝试此工作演示

  $(function(){
        $("#telefonofisso").click(function(){
            var modified = $('.slider').css('left') === '250px' ? '0px' : '250px';            
            $('.slider').animate( {            
                left : modified
            }, 300)
        });
    })

http://jsfiddle.net/stanze/02e11v2p/1/

jquery动画触发器点击

2 个答案: