絶対に配置された 4 つの div (クラス 'eachthumb') の垂直スタックがあり、カルーセルのような動作をエミュレートしようとしています。4 つの div すべてが上に移動し、次に上の 1 つが下に移動します。上から2番目のものは「currindex」のクラスを持っています。値が 0 から 3 の間の 2 つの変数があり、移動中の div (mover と呼ばれます) と上から 2 番目の 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 関数への 2 つの呼び出しがあることに気付くかもしれません。「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}