jquery parallel animation

Question

I want to show the popup. When user clicks on link then popup will be shown with animation. It will animate slightly to the left side as well as fadeIn both at the same time. My current code on animate it slightly towards left but fadeIn does not work. Here is my jquery code

showpopup : function (e) {
        e.preventDefault();
        var continent = $(this).attr('rel'),
            pop       = $('<div></div>').addClass('popup').html(continent);

            pop.insertAfter('#continents').stop().animate({'left': '550px'},100);
            pop.fadeIn();
    }

here is my css for pop

.popup {
width: 300px; height: 200px;
position: absolute;
left: 580px;
top: 40px;
padding: 5px; background: #ccc;
border-radius: 5px;
z-index: 100;
border: 1px solid #ccc;
}

May be duplicate of http://stackoverflow.com/questions/1652576/how-do-you-fadein-and-animate-at-the-same-time — muthu, Sep 21 '12 at 08:43

score 1 · Answer 1 · answered Sep 21 '12 at 08:45

1

I created a Fiddle based on your code with a working example.

Important things:

pop.animate({'left': '550px', 'opacity': 1}, 500);

This will ensure the fading and animating the "left" property will be done at the same time.

answered Sep 21 '12 at 08:45

MarcoK

6,090
2
28
40

Does my Fiddle don't work for you? Take note you need to read/understand all the lines of code (Line the `pop.css({'opacity' : 0});` I needed to add"). – MarcoK Sep 21 '12 at 09:01

score 0 · Answer 2 · answered Sep 21 '12 at 08:42

I think your popup needs to be hidden in order for fadeIn to work. Try adding a call to hide() before adding it to the DOM.

showpopup : function (e) {
        e.preventDefault();
        var continent = $(this).attr('rel'),
            pop       = $('<div></div>').addClass('popup').html(continent);

            pop.hide().insertAfter('#continents').stop().animate({'left': '550px'},100);
            pop.fadeIn();
    }

Or add display: none; to your css:

.popup {
display: none;
width: 300px; height: 200px;
position: absolute;
left: 580px;
top: 40px;
padding: 5px; background: #ccc;
border-radius: 5px;
z-index: 100;
border: 1px solid #ccc;
}

Now it does fadeIn but does not move towards left. – Om3ga Sep 21 '12 at 08:44 — Om3ga, Sep 21 '12 at 08:44

jquery parallel animation

2 Answers2