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 animate my HTML Elements if i click on the "Next-Button". It works with jQuery own "animate"! But i want now add to each Element his own Animation from my CSS-File.

Here is my HTML snippet:

<div id="output0" class="output0">output0</div>
<div id="output1" class="output1">output1</div>
<div id="output2" class="output2">output2</div>
<div id="output3" class="output3">output3</div>
<div id="output4" class="output4">output4</div>

Here is my CSS snippet:

.output0 {
    position: absolute;
    top: 120px;
    left: 300px;
    width: 200px;
    height: 500px;
    border-top-left-radius: 10px 5px; 
    border-bottom-right-radius : 10% 5%;
    border-top-right-radius : 10px;
    background: #4d4ea3;
    text-align: center;
    text-shadow: 0 1px rgba(0, 0, 0, 0.6);
color: #FFF;
font-size: 14px;
line-height: 50px;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 1;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;
}

... and so on for each Element/Class their own Animation ...

Here is my Script snippet:

var jButton = $('#Next');
$('.output','.output0', '.output1', '.output2','output3', '.output4', '.output5').hide();
jButton.data(
    "config",
    {
        Index: 0,
        Collection: $('.output','.output0', '.output1', '.output2','output3', '.output4', '.output5')
    });
jButton.click(
    function(objEvent){
        var jThis = $(this);
        var objConfig = jThis.data("config");
        if (objConfig.Index < objConfig.Collection.length){
            $(objConfig.Collection[objConfig.Index++]
        )
        .$('.output0').addClass(fadeInLeftBig),
        $('.output1').addClass(flipInX),
        $('.output2').addClass(fadeInRightBig),
        $('.output3').addClass(fadeInDownBig),
        $('.output4').addClass(fadeInUpBig),
        $('.output5').addClass(animate);
        //$('.output').addClass();
        //.slideDown();
        }
        objEvent.preventDefault;
        return(false);
    });
});

Please help guys!? Any Idea?

Edit:

sorry that i'm answering now. i had to work in another projects. Now i'm back. ok, i used now same classes and with different ID's. And those ID's i used in my CSS-File. But now the main Problem is - "How can i use in Jquery with any other Animation in my code now?". I mean not only >slideDown, i.e. fadeIn, slideIn for each Data Object/Array Element another one and it should be exact this one, :)? - How can i use Data Object with second Button "jButton2" to catch that wich element is >actual animated or in data storage is. With this jButton2 i want rollback the animation and >for this i need to know wich element is actual there. Thanks for your Help!

JS:

$(jButton1).data("config", {
    Index : 0,
    Collection : $('.output')
}
...
jButton1.click(function(objEvent) { 
    var jThis = $(this); 
    var objConfig = jThis.data("config"); 
    if (objConfig.Index < objConfig.Collection.length) {                                         
        $(objConfig.Collection[objConfig.Index++]).slideDown("slow"); 
    } 
}

HTML:

<div id="output0" class="output">output0</div>
<div id="output1" class="output">output1</div>
<div id="output2" class="output">output2</div>
<div id="output3" class="output">output3</div>
<div id="output4" class="output">output4</div>

回答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/

回答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;

    })



});

来源：https://stackoverflow.com/questions/18485786/how-to-attach-for-every-array-element-in-jquery-different-animationeffects-and