Question

我有一个使用此插件https://github.com/bas2k/jquery.appear/创建的出现函数，如下所示

＆＃13;

/* ==================================================
 Animated Appear Element
 ================================================== */
DDDDD.fn.animatedAppear = function() {
  if ($(window).width() > 1024) {
    $('.animated').appear(function() {
      var $element = $(this);
      var animation = $element.data('animation');
      var animationDelay = $element.data('delay');
      if ($element.hasClass('hiding')) {
        if (animationDelay) {
          setTimeout(function() {
            $element.addClass(animation + " visible");
            $element.removeClass('hiding');
          }, animationDelay);
        } else {
          $element.addClass(animation + " visible");
          $element.removeClass('hiding');
        }
      }
    }, {
      accY: -50
    });

  } else {
    $('.animated').css('opacity', 1);
  }
};

＆＃13;

我在DDDD.fn.animatedAppear();上调用了$(document).ready(function ()，它对使用页面加载的元素工作正常，但是在ajax调用中创建的新元素没有动画显示效果，然后我调用{{1在ajax成功结束时...它适用于新元素，但也重新动画了页面上的所有元素。

如何从已经动画显示的元素中删除动画？

以下是动画元素的示例

DDDD.fn.animatedAppear();

和等待动画的元素就像这样

<li class="item-thumbs span3 design animated fadeIn visible" data-animation="fadeIn"></li>

Answer 1

我解决了问题所有我要做的就是设置延迟并删除数据动画属性和类fadeIn：

＆＃13;

/* ==================================================
     Animated Appear Element
     ================================================== */
DDDDD.fn.animatedAppear = function() {
  if ($(window).width() > 1024) {
    $('.animated').appear(function() {
      var element = $(this);
      var animation = element.data('animation');
      var animationDelay = element.data('delay');
      if (element.hasClass('hiding')) {
        if (animationDelay) {
          setTimeout(function() {
            element.addClass(animation + " visible");
            element.removeClass('hiding');
          }, animationDelay);
        } else {
          element.addClass(animation + " visible");
          element.removeClass('hiding');
          setTimeout(function() {
            element.removeClass('fadeIn');
            element.removeAttr('data-animation');
          }, 1000);
        }
      } else {}
    }, {
      accY: -50
    });

  } else {
    $('.animated').css('opacity', 1);
  }
};

＆＃13;

将show函数应用于在ajax成功中创建的元素

1 个答案: