我有一个由 4 个 div 组成的垂直堆栈（带有“eachthumb”类），绝对放置，我试图让它们模拟类似轮播的行为。所有四个 div 都向上移动，然后顶部的一个移动到底部。从上数第二个有一类'currindex'。有两个变量，值介于 0 和 3 之间，表示正在移动的 div 的数据索引值（称为 mover），以及从顶部数第二个的 div（newnow）。我无法显示我的所有代码，但这是我认为很麻烦的部分：
$('.eachthumb').animate({top: "-=110px"},200);
$('.eachthumb').removeClass('currindex');
$(".eachthumb[data-index='" + newnow +"']").addClass('currindex');
$(".eachthumb[data-index='" + mover +"']").css("top", "342px");
div 按预期向上移动，currindex 类按预期传递给新 div。但是，最后一行似乎没有执行。
我想知道这些语句是否执行得太快，或者是否需要将最后一条语句设置为 animate 语句的回调。我不知道它是否有区别，但“顶部”值是内联样式，而不是样式表样式。或者这可能是我没有看到的语法问题。无论如何，如果您有任何想法要分享，那就太好了。
编辑：
这里还有一些代码。这包括生成 HTML 的 smarty 模板代码和所有脚本。如您所见，所讨论的迷你轮播是作为来自主旋转器的回调触发的，主旋转器是Flux Slider。你可能会注意到有两个对 mouseenter/mouseleave 函数的调用——我注意到当 'currindex' 类被重新分配给一个新元素时，效果被破坏了。
{*debug*}
<div id="fluxslider">
{foreach from=$events item=event}
<img src="{$event.tf_photo}" alt="{$event.name}" data-value="{$evt.id}"/>
{/foreach}
</div>
<div class="fluxtopfade"></div>
<div class="fluxbotfade"></div>
<div id="fluxthumbs">
{foreach from=$events item=thumb name=thumb}
<div class="eachthumb{if $smarty.foreach.thumb.index eq 0} currindex{/if}" data-index="{$smarty.foreach.thumb.index}">
<img src="{$thumb.tf_photo}" />
<div class="evtinfo invisible">
<h5>
{if $thumb.date_start|date_format:"%b-%d" != $thumb.date_end|date_format:"%b-%d"}
{if $thumb.date_start|date_format:"%b" != $thumb.date_end|date_format:"%b"}
{$thumb.date_start|date_format:"%b %d"} - {$thumb.date_end|date_format:"%b %d, %Y"}
{else}
{$thumb.date_start|date_format:"%B %d"} - {$thumb.date_end|date_format:"%d, %Y"}
{/if}
{else}
{$thumb.date_start|date_format:"%B %d, %Y"}
{/if}
</h5>
<p>{$thumb.date_start|date_format:"%l:%M %p"}</p>
<a href="{$path_http}events/?evtid={$thumb.id}" class="amoreinfo">More Info</a>
{if $event.custom.1.data.0}<a href="{$event.custom.2.data.0}" target="_blank" class="atickets">Buy Tickets</a>{/if}
</div>
</div>
{/foreach}
</div>
<script src="{$path_http}css/flux.min.js"></script>
{literal}
<script type="text/javascript">
$(function(){
$(".eachthumb[data-index='" + 3 +"']").css("top", "12px");
$(".eachthumb[data-index='" + 0 +"']").css("top", "122px");
$(".eachthumb[data-index='" + 1 +"']").css("top", "232px");
$(".eachthumb[data-index='" + 2 +"']").css("top", "342px");
window.myFlux = new flux.slider('#fluxslider', {
controls: true,
width: 736,
height: 354,
transitions: ['blinds'],
delay: 20000,
onTransitionEnd: function() {
var oldnow = $('.currindex').data('index');
console.log(oldnow);
if (oldnow == 3){
var newnow = 0;
} else {
var newnow = oldnow + 1;
}
if (oldnow == 0){
var rover = 3;
} else {
var rover = oldnow - 1;
}
$('.eachthumb').animate({top: "-=110px"},200);
$('.eachthumb').removeClass('currindex');
$(".eachthumb[data-index='" + newnow +"']").addClass('currindex');
$('.currindex').on('mouseenter',function(){
$(this).find('.evtinfo').removeClass('invisible');
});
$('.currindex').on('mouseleave',function(){
$(this).find('.evtinfo').addClass('invisible');
});
$(".eachthumb[data-index='" + rover +"']").css("top", "342px");
}
});
});
$(function(){
$('.currindex').on('mouseenter',function(){
$(this).find('.evtinfo').removeClass('invisible');
});
$('.currindex').on('mouseleave',function(){
$(this).find('.evtinfo').addClass('invisible');
});
});
</script>
{/literal}