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}
movervariable isn't coming in correctly and the selector can't grab it. My guess!