Question

I would like to be able to set some animations on a set of divs.

Here is what I have so far:

$(".nextwp").click(function(){
    $('.welcome').animate({
        left: "-9999px"
    }, 8500);
    $('.welcome').animate({
        right: "-=9999px"
    }, 0);

    $('.work').animate({
        right: "+0px"
    }, 1300);
});

I want the .welcome class div to move to the left for a duration of 8.5 seconds until it is hidden from view. Then I need to reset it’s position to right of -9999px. It is not reseting for some reason. Am I going about this the right way? Once it’s position is set to -9999px I need the work class div to slide in from the right.

Let me know if you need more info.

The problem is that the welcome class div never gets it’s position set to -9999px for some reason.

Thanks in advance.

(basically a simple custom slider)

Answer 1

Well, if you think about this approach what you’re really telling it to do is to animate 9999px in 8.5 seconds, I wouldn’t expect this to behave consistently.

The easy option would be to use the effects module of jQuery UI and use $el.show('slide').

If you want something custom, then your best bet would be to create a container with overflow: hidden and slide the element till it gets out of view. This would be far more predictable and will perform way better.