使用 jquery 循环插件，旋转后幻灯片内的动画元素答案

【问题标题】：using jquery cycle plugin, animating elements within the slide after rotation使用 jquery 循环插件，旋转后幻灯片内的动画元素
【发布时间】：2012-03-12 00:54:39
【问题描述】：

我使用 jquery 循环创建了一个幻灯片，每个幻灯片 div 都包含包含图像和文本的子 div，并且想知道是否可以在使用显示每张幻灯片后为其中一个子 div 中的文本设置动画'之后'。基本上，我想知道幻灯片完成后是否可以为幻灯片 div 中的任何内容设置动画。显示幻灯片后，我似乎无法发生任何事情或被动画化。

//Run the slide show:
$('#slide').cycle({ 
    fx:     'fade', 
    timeout: 1000, 
    after: onAfter,
});

//function to animate element within the '#slide' div after slide is rotated in
function onAfter() { 
   $('#slide div .right').animate({
   easing: 'linear',
   //shrink the font size down
   fontSize : '18px',
}, 2000, function() {
   // Animation complete.
});
};

这是html：

    <div id="slide">
    <div><!--slide 1-->
    <div class="left"><img src="images/theimage1.jpg" alt="An Image" /></div>
    <div class="right">this is the text I want to animate once the slide is shown</div>
    </div>

    <div><!--slide 2-->
    <div class="left"><img src="images/theimage2.jpg" alt="An Image" /></div>
    <div class="right">animate more text once this slide is displayed</div>
    </div>

    <div><!--slide 3-->
    <div class="left"><img src="images/theimage3.jpg" alt="An Image" /></div>
    <div class="right">animate this text when slide 3 is shown</div>
    </div>

    </div><!--end #slide -->

这是css：

    <style type="text/css" media="all">
    #slide { width: 950px; border: none; background-color: #fff;  }
    #slide div { width: 100%; }
    #slide div .left    {float: left; width: 350px; padding: 0;}
    #slide div .right   {float: right; color: #666; font-size: 40px; width: 560px; }
    </style>

【问题讨论】：

我会将图像和文本放在单独的 div 中（不在彼此之间）并使用 CSS 将文本放在图像顶部。

标签： jquery jquery-animate jquery-cycle

【解决方案1】：

我找到了一个可行的解决方案，尽管它可能不是最佳解决方案。

看起来您提供的代码几乎就是您所需要的。照原样，它适用于我的第一张幻灯片，但不适用于后续幻灯片。原因是 onAfter 函数选择所有“.right” div 进行动画处理。因此，第一次运行时，所有“.right” div 都处于最终状态，因此再次运行它没有任何效果（您告诉每个人从 18px 到 18px 进行动画处理）。那么，关键是将文本重置为原始大小，以便可以缩小，但仅限于即将发布的幻灯片。

为此，您可以使用插件的“before”和“after”回调，每个回调都发送几个参数，其中包括“currSlideElement”和“nextSlideElement”作为前两个参数（您可以看到我如何将它们合并到代码中以下）。不过，首先要快速说明一下：“after”回调似乎改为接收前一个元素和当前元素，而不是插件文档所述的当前元素和下一个元素。我不确定这是插件中的错误还是文档中的错字，或者也许（更有可能），我只是误解了一些东西。无论哪种方式，我们都可以让它工作......

所以唯一的变化如下：我在幻灯片中添加了一个 before 回调：

$('#slide').cycle({ 
    fx:     'fade', 
    timeout: 5000,
    before: onBefore,
    after: onAfter
});

这里是回调：

function onBefore(currentElement, nextElement) {
    $(nextElement).find('.right').css({fontSize: '40px'}); // reset css for upcoming text
}

function onAfter(previousElement, currentElement) {
    // Note: Plugin documentation says parameters should be (currentElement, nextElement), but that doesn't seem to be the case! 
    $(currentElement).find('.right').animate({fontSize: '18px'}, 2000); // animate current text
};

希望对您有所帮助（如果我解释过度，请原谅……希望对其他读者有所帮助）。

干杯。

【讨论】：