Question

我有一个4个div的垂直堆栈（类'everythumb'），绝对放置，我试图让他们模仿类似旋转木马的行为。所有四个div向上移动，然后顶部的一个移动到底部。从顶部开始的第二个有一个'currindex'。有两个变量，其值介于0和3之间，表示正在移动的div（称为移动器）的数据索引值，以及将从顶部开始的第二个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语句的回调。我不知道它是否有所作为，但'top'值是内联样式，而不是样式表样式。或者它可能是我没有看到的语法问题。无论如何，如果你有任何想法分享，那就太好了。

编辑：

这是一些更多的代码。这包括生成HTML的智能模板代码和所有脚本。正如您所看到的，有问题的小型旋转木马是作为主旋转器的回调触发的，这是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"});

Answer 2

此代码最终正常运行。我认为它试图过早地调用CSS方法，也许是在animate方法完成之前调用它，并且它在shuffle中丢失了。将CSS方法放在回调函数中解决了这个问题。有趣的是，在我今天写的另一个函数中，运动在动画之前出现，不需要回调。

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

Answer 3

第一行是。

$('.eachthumb').animate({top: "-=110px"},200);

不应该......

$('.eachthumb').animate({top: "-110px"},200);

jQuery .css方法不执行

3 个答案: