3

I am having a bug with my custom slider script. When I am on the page everything goes smoothly, but when I open another tab and browse for a minute or so, and than comeback to my page my script goes crazy... Script is very straightforward.

Here is Jsfiddle - There are no images in the slider and that is why it does not look nice as it should..

function show12(evt){
$('#number_1').unbind();
$('#number_2').unbind();
// First slide
$('#number_1').css({
    position: 'absolute',
    top: '9px',
    left: '10px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_1').css({
    position: 'absolute',
    top: '9px',
    left: '47px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

// Second slide
$('#number_2').css({
    position: 'absolute',
    top: '9px',
    left: '445px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_2').css({
    position: 'absolute',
    top: '9px',
    left: '481px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

// Third slide  
$('#number_3').css({
    position: 'absolute',
    top: '9px',
    left: '879px'
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_3').css({
    display: 'none'
});

// Forth slide  
$('#number_4').css({
    position: 'absolute',
    top: '9px',
    left: '917px'
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_4').css({
    display: 'none'
});

$('#number_1, #number_2').hover(
    function(){window.clearInterval(timer); i=1;}
);

$('#number_1, #number_2').mouseout(
    function(){
        $(this).unbind();
        timer = window.setInterval(function(){slideLogos();}, 4000); i=1;
    }
);


$('#number_3').hover(function(){$(this).unbind(); i++; show34();});
$('#number_4').hover(function(){$(this).unbind(); i++; show34();});

}

function show34(){
$('#number_3').unbind();
$('#number_4').unbind();

    // First slide
$('#number_1').css({
    position: 'absolute',
    top: '9px',
    left: '10px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_1').css({
    display: 'none'
});

// Second slide
$('#number_2').css({
    position: 'absolute',
    top: '9px',
    left: '48px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_2').css({
    display: 'none'
});

// Third slide  
$('#number_3').css({
    position: 'absolute',
    top: '9px',
    left: '86px'
}).effect('slide', {
    direction: 'right',
    mode: 'show'
}, 'slow');

$('#slide_3').css({
    display: 'inline-block',
    position: 'absolute',
    top: '9px',
    left: '123px',
}).effect('slide', {
    direction: 'right',
    mode: 'show'
}, 'slow');

// Forth slide
$('#number_4').css({
    position: 'absolute',
    top: '9px',
    left: '521px'
}).effect('slide', {
    direction: 'right',
    mode: 'show'
}, 'slow');

$('#slide_4').css({
    position: 'absolute',
    top: '9px',
    left: '558px',
}).effect('slide', {
    direction: 'right',
    mode: 'show'
}, 'slow');

$('#number_3, #number_4').hover(
    function(){window.clearInterval(timer); i=0;}
);

$('#number_3, #number_4').mouseout(
    function(){
        $(this).unbind();
        timer = window.setInterval(function(){slideLogos();}, 4000); i=0;
    }
);

$('#number_1').hover(function(){$(this).unbind(); i++; show12();});
$('#number_2').hover(function(){$(this).unbind(); i++; show12();});
}

function slideLogos(){


switch(i%2){
    case 0:
        show12();
        break;
    case 1:
        show34();
        break;
}
i++;
}

var i = 1;
var timer;

$('document').ready(function(){

show12();

timer = setInterval(function(){slideLogos();}, 4000);

});

Number_n - is number always shown in slider, Slide_n - is a slide that is being shown/hidden, sorry about that :)

Dexy_Wolf
  • 989
  • 3
  • 13
  • 25
  • 1) you need to comment your code in english or break it up. This problem can only be replicated in weird circumstances and your javascript variable/function names are all named poorly giving no context to whats actually going on. – BentOnCoding Aug 20 '11 at 18:49
  • Also setting "position : absolute" so many times is redundant and un-necessary. – BentOnCoding Aug 20 '11 at 18:51
  • Thanks for the comments. I will try with removing `position: absolute`.. – Dexy_Wolf Aug 20 '11 at 18:56

2 Answers2

1

Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop.

The documentation suggests using the animation callbacks or the jQuery .queue() function on the element.

jQuery Queue()

Also this answer on queues is really interesting: What are queues in jQuery?

Community
  • 1
  • 1
BentOnCoding
  • 27,307
  • 14
  • 64
  • 92
  • Do you think that `Queue()` can fire up animations instantly (not simultaneously)? I have book Manning jQuery in Action and there is nothing on this topic. – Dexy_Wolf Aug 22 '11 at 00:37
  • Queue will not change the behavior of your current animation logic, it will simply be the mechanism that ensures consistent behavior. Try adding the Queue () with callback functions and be sure to call Dequeue() as well. See the jquery docs for various code samples. – BentOnCoding Aug 22 '11 at 01:28
0

I once ran into this same problem. I wouldn't say the script was going crazy as much as the animation appeared to be cached until I returned to the page. I don't know if this happens for you, but for me the sliding eventually slowed back down to the normal speed. I also noticed that the same thing happened across all browsers. So I figured it had to be caused by jQuery. Sure enough the problem disappeared by reverting to an older version of jQuery (1.5 instead of 1.6, if I remember correctly).

  • 1
    reverting to jquery 1.5 is not the answer. You should read the docs more carefully. Please see the answer posted. – BentOnCoding Aug 21 '11 at 11:07