0

我有以下 jquery 函数，可以为我的文本设置动画。基本上，它会找到我要求的所有元素并为它们设置动画。如您所见，问题在于它一次找到所有元素并同时为它们设置动画。我希望每个元素（h2、h3 和 span）彼此分开动画。

有什么建议么？也许 .find 命令之间存在某种中断？谢谢！

      $nextSlide.find('div.ei-title > h2')
                      .css( 'margin-right', 50 + 'px' )
                      .stop()
                      .delay( this.options.speed * this.options.titlesFactor )
                      .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
                      .end()
                      .find('div.ei-title > h3')
                      .css( 'margin-right', -50 + 'px' )
                      .stop()
                      .delay( this.options.speed * this.options.titlesFactor )
                      .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
                      .end()
                      .find('div.ei-title > span.custom1')
                      .css( 'margin-right', -50 + 'px' )
                      .stop()
                      .delay( this.options.speed * this.options.titlesFactor )
                      .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
                      .end
                      .find('div.ei-title > span.custom2')
                      .css( 'margin-right', -50 + 'px' )
                      .stop()
                      .delay( this.options.speed * this.options.titlesFactor )
                      .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
                      .end
4

1 回答 1

0 
$nextSlide.find('div.ei-title > h2')
  .css( 'margin-right', 50 + 'px' )
  .stop()
  .delay( this.options.speed * this.options.titlesFactor )
  .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing, function(){
    $nextSlide.find('div.ei-title > h3')
      .css( 'margin-right', -50 + 'px' )
      .stop()
      .delay( this.options.speed * this.options.titlesFactor )
      .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing, function(){
        $nextSlide.find('div.ei-title > span.custom1')
          .css( 'margin-right', -50 + 'px' )
          .stop()
          .delay( this.options.speed * this.options.titlesFactor )
          .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing, function(){
            $nextSlide.find('div.ei-title > span.custom2')
              .css( 'margin-right', -50 + 'px' )
              .stop()
              .delay( this.options.speed * this.options.titlesFactor )
              .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
          });
      });
  });

出于此代码的目的，我们必须使用我们希望对其应用过滤器的对象的标识符。我们不能简单地使用 $(this) 作为回调中的引用。根据您的代码，它看起来好像$nextSlide引用了我们正在过滤的对象。为此，我们在动画中使用$nextSlide了参考对象。callback function我们也将回调称为 的onComplete事件animate function。

于 2012-07-24T14:40:43.263 回答