jQuery .css 方法不执行

Question

我有一个垂直堆叠的 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}

Answer 1

可能是您没有在 css 中为该元素声明 position:absolute。如果你还没有声明那么你必须做这样的事情:

$(".eachthumb[data-index='" + mover +"']").css({"position":"absolute","top":"342px"});