0

I have a vertical stack of 4 divs (with class 'eachthumb'), placed absolutely, and I am trying to get them to emulate a carousel-like behavior. All four divs move upward, and then the one on top is moved to the bottom. The second one from the top has a class of 'currindex'. There are two variables, having a value between zero and three, which signify the data-index value of the div which is moving (called mover), and the div which will be second from the top (newnow). I'm unable to show all of my code, but here is the part which I believe to be troublesome:

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

The divs move upward as expected, and the currindex class is passed to the new div as expected. However, the final line does not appear to execute.

I'm wondering if these statements are executing too quickly, or if the last statement needs to be set up as a callback to the animate statement. I don't know if it makes a difference, but the 'top' values are inline styles, as opposed to stylesheet styles. Or it could be a syntax issue that I'm just not seeing. Anyway, if you have any thoughts to share, that would be great.

Edit:

Here's some more code. This includes the smarty template code that generates the HTML, and all of the script. As you can see, the mini-carousel in question is triggered as a callback from the main rotator, which is a Flux Slider. You may notice that there are two calls to mouseenter/mouseleave functions - I noticed that the effect was being destroyed when the 'currindex' class was reassigned to a new element.

{*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}
2
  • can u make a fiddle ? Commented Oct 23, 2013 at 1:35
  • If it isn't working, then either the element doesn't have position relative or absolute, or your mover variable isn't coming in correctly and the selector can't grab it. My guess! Commented Oct 23, 2013 at 1:39

3 Answers 3

1

May be you have not declared position:absolute for the element in the css. If you have not declared then you have to do something like this:

$(".eachthumb[data-index='" + mover +"']").css({"position":"absolute","top":"342px"});
Sign up to request clarification or add additional context in comments.

1 Comment

.eachthumb { width: 229px; height: 110px; position: absolute; right: 0px; }
1

This code ended up working. I think it was trying to call the CSS method too early, perhaps before the animate method was finished, and it got lost in the shuffle. Placing the CSS method in a callback function solved this problem. Interestingly, in another function that I wrote today, in which the movement comes before the animation, no callback was needed.

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

Comments

-1

The first line is.

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

Shouldn't it be...

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.