How To Attach For Every Array-Element In JQuery Different Animationeffects? And Animate One By One Forwards And Backwards With 2 Buttons(back&next)?

Update: Title changed! Maybe it was or stil wrong defined. sorry for my bad english! i'm new in JQuery and always in programming, Javascript, CSS3 and HTML5. And i'm trying to anim

Solution 1:

It might be worth noting that jQuery UI supports class switching while jQuery alone doesn't.

From jQuery's documentation for animate()

Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.

And here's a link to the jQuery UI documentation: http://jqueryui.com/switchClass/

Solution 2:

after reading some books and researching and try outs, worked the following code for my preceding problem (original code was found here but i can't find the link again, sorry). It's not perfect but i can use it for a halfway, :D. On a final solution i'm working now. By the way i had last 3 weeks vacation, so that's why it took so long, :).

Different Animationeffects coming soon!

So here we go:

// Click Next to animate one by one
$(function() {
    var myArray = $('.output');
    var arrayIndex = 0;

    //Go Forwards
    $('#Next').click(function() {

        $(myArray[arrayIndex++]).slideDown()

        if (arrayIndex >= myArray.length)
            arrayIndex = 0;
    })


    //Go Backwards
    $('#Back').click(function() {
        $(myArray[arrayIndex--]).slideUp()
        if (arrayIndex < 0)
            arrayIndex = myArray.length - 1;

    })



});