动画后没有删除jQuery元素

时间:2014-01-13 12:09:10

标签: javascript jquery html animation

我已经创建了一个jQuery函数,在单击时会激活“添加到购物车”按钮,因此它会飞到顶部栏上的购物车图标。我已经克隆了div标签,因为我仍然希望在用户点击一次后可以使用“添加到购物车”按钮,然后我设置了动画功能以删除已经完成后向上飞行的div。

我的问题是,一旦该功能运行一次,它将不会再次运行。例如,如果客户点击“添加到购物车”按钮,然后再决定再次点击该按钮,则该按钮将不会在第二次设置动画。

这是我的JavaScript代码 - 它可能看起来有点过于复杂,但这是由于我正在处理的页面上按钮的位置。

$('.addToCart').click(function(){

    var leftPos = $(this).position().left + $(this).parent().offset().left;
    var existingLeftCSS = $(this).css('margin-left');
    var existingTopCSS = $(this).css('margin-top');
    var leftPos = parseFloat(leftPos) - parseFloat(existingLeftCSS);
    var topPos = $(this).offset().top - $(window).scrollTop()+'px';
    var topPos = parseFloat(topPos) - parseFloat(existingTopCSS);
    var newLeftPos = $('#cartButton').offset().left - parseInt($(this).css('margin-left'));

    setTimeout(function(){$(this).remove();}, 110);
    $(this).clone().appendTo($(this).parent());
    $(this).css('z-index','999');


  $(this)
  .css({
      position:'fixed',
      top: topPos,
      left: leftPos
  })
  .animate({
    top:"40",
    left: newLeftPos

  }, 500, function(){
    $(this).remove();
  });


});

或者对于我的问题的简化版本,请参阅此jsfiddle: http://jsfiddle.net/jxbbm/

3 个答案:

答案 0 :(得分:2)

我认为你应该使用事件委托,因为:

$('.productBox').on('click', '.addToCart', function() {
  ...
});

答案 1 :(得分:1)

将代码的第一行更改为

$('.productBox').on('click', '.addToCart', function(){

答案 2 :(得分:1)

替换$(this).clone()... for

var clone = $(this).clone(); 
    $(clone).appendTo($(this).parent()); 
    $(clone).css('z-index','999'); 
    $(clone).css({
              position:'fixed',
              top: topPos,
              left: leftPos   })
    .animate({
            top:"8",
            left: newLeftPos   
    }, 500, function(){
              $(this).remove();   
    });