0
我有一個垂直堆疊的4個div（帶有'eachthumb'類），絕對放置，我試圖讓他們模擬類似於輪播的行爲。所有四個div向上移動，然後頂部移動到底部。第二位來自頂級的「currindex」。有兩個變量，其值在0到3之間，表示正在移動的div（稱爲移動器）的數據索引值，以及將從頂部（newnow）開始秒的div。我無法證明我的所有代碼，但這裏是我認爲是麻煩的部分：jQuery .css方法不會執行
$('.eachthumb').animate({top: "-=110px"},200);
$('.eachthumb').removeClass('currindex');
$(".eachthumb[data-index='" + newnow +"']").addClass('currindex');
$(".eachthumb[data-index='" + mover +"']").css("top", "342px");
的div向上移動的預期，且currindex類被傳遞到新的div預期。但是，最後一行似乎沒有執行。
我想知道這些語句是否執行得太快，或者如果最後一條語句需要設置爲回調到動畫語句。我不知道它是否有所作爲，但「頂級」值是內聯樣式，而不是樣式表樣式。或者它可能是一個語法問題，我只是沒有看到。無論如何，如果你有任何想法可以分享，那會很棒。
編輯：
下面是一些更多的代碼。這包括生成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}
你能做個小提琴嗎？ –
如果它不工作，那麼要麼元素沒有相對位置或絕對位置，*或*您的'移動器'變量沒有正確進入，選擇器不能抓住它。我猜！ –