current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>
share|improve this question
    
After trying things, i think now it's better to use effects of jQuery. But i'm stucking now in my loop how i can use different animation effects to every Element. I'm reading now books about Javascript. With jQuery books i reached nothing(maybe i found wrong books for my learning), :). Is there any recommendation of good books to learn Javascript/jQuery. –  bachka Sep 6 '13 at 12:33

2 Answers 2

up vote 0 down vote

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/

share|improve this answer
    
Thank you for your answer! i'll try it now and come back later, :). –  bachka Aug 28 '13 at 12:31
up vote 0 down vote accepted

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;

    })



});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.