I am creating a simple image marquee concerning images. Seems simple enough, however it doesn't want to do the animations in order. The code shown, does work. It hides the first image and fades it in behind the rest and the cycle continues. However, it isn't real eye pleasing as the first image just disappears.
I would love to use the animate I have commented out. Animate the first image out, append it behind the rest and then fade it back in and repeating the process for as long as required. However replacing the hide() with the animate makes the image append first and then slide/fade out and then fadeIn in the wrong order.
Is there something I'm doing wrong in my sequence of events or how do I get it to work correctly?
<script type="text/javascript">
$(document).ready(function() {
function doSilver() {
image = $('.str3 .inline-image:first');
console.log(image.attr('src'));
image.hide().appendTo('.str3').css('display','hidden').fadeIn();
//$('.str3').append(image);
//$(image).animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
}
setInterval(doSilver, 5000);
});
</script>
JSFiddle (showing animation problem): http://jsfiddle.net/zmnLa3wq/5/
try this
<script type="text/javascript">
$(document).ready(function() {
function doSilver() {
image = $('.str3 .inline-image:first').parent();
console.log(image.attr('src'));
image.fadeOut(1200);
setTimeout(function(){image.appendTo('.str3').fadeIn(1200)},1200);
}
setInterval(doSilver, 5000);
});
</script>