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

Question

我已经创建了一个使用jQuery循环的幻灯片，并且每个幻灯片div都包含包含图像和文本的子div，并且想知道是否可以动画文本在每个幻灯片之后的其中一个子div使用'onAfter'显示。基本上我想知道是否可以在幻灯片放映完成后为幻灯片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> 

Answer 1

我发现这样的作品，虽然它可能不是最佳的解决方案的解决方案。

它看起来像你提供的代码是几乎所有你需要的。现在，它为我的第一张幻灯片，但没有后续的幻灯片。原因是onAfter函数选择了所有“.right”div来设置动画。因此，第一次运行时，所有“.right”div都处于最终状态，因此再次运行它没有任何影响（您要告诉每个div从18px到18px都进行动画制作）。然后，关键是将文本重置为原始大小，以便收缩，但仅适用于即将推出的幻灯片。要做到这一点，你可以使用插件的“before”和“after”回调函数，每个函数都发送几个参数，其中包括“currSlideElement”和“nextSlideElement”作为前两个参数（你可以看到我如何将它们合并到代码如下）。首先一个快速的侧面说明，虽然：“后”回调似乎接收前一个元素和当前元素，而不是当前和下一个插件的文档状态。我不确定这是插件中的错误还是文档中的错字，或者（更可能），我只是误解了一些东西。无论哪种方式，我们可以得到它的工作...

所以，唯一的变化如下： 我添加了一个回调到幻灯片前：

$('#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 
}; 

希望有帮助（如果我过度解释，希望它能帮助其他读者）。

干杯。