Question

I’ve made my own slider with jQuery using .animate functions throughout, and the slider works when I use it once, and twice, but on the 3rd try, it goes crazy! Basically it’s similar to Microsoft’s ‘For Home’ and ‘For Work’ slider, but a lot less complex (right now)

It is live on a website, and to show you what I mean, here’s the URL:
http://glorbi.com/index3

(Click For Work, then For Home, then For work, it starts to fail)

Here’s the jQuery that handles the sliding:

$("#sidebar2").click(function(){
            $("#innerSec2").animate({"right" : 130}, 1000); 
            $("#sidebar2").animate({"height" : 1100});
            $("#innerSec").animate({"left" : -840}, 1000);
            $("#innerSec").animate({"left" : 840}, 200);
            $("#sidebar").animate({"height" : 400});
    });
    $("#sidebar").click(function(){
        $("#innerSec").animate({"left" : 0}, 1000);
        $("#sidebar").animate({"height" : 1100});
        $("#innerSec2").animate({"right" : 970}, 1000);
        $("#innerSec2").animate({"left" : 710}, 200);
        $("#sidebar2").animate({"height" : 400});
    });

I’ve tried using callbacks, but they lead to a more sequential reaction, moving the slider in parts, which looks pretty horrible.

Also I am aware of the z-index issue as it slides, and I’ll fix that!

Does anyone know how I could fix this? The code is pretty generic, and it’s strict values for every action, I don’t really see how it’s failing. :S

Thanks alot! Any help is greatly appreciated! 🙂

Answer 1

After fiddling with it in firebug, I found out that the left:710px on innerSec2 is causing problem, after we click on sidebar2 div, so I tried following and it seems working except z order problem which you can fix 😀

$("#sidebar2").click(function(){$("#innerSec2").animate({"left":-130},0);});