Multiple jQuery-Effects parallel at same time

Question

i´d like to fadeIn a submenu and chance the position at the same time.

Like the cool Coda-Tooltip (http://panic.com/coda/) over "download".

My code just do the fade this time:

$(document).ready(function(){
    $('#access').hover(function () {
        $(this).children('ul').fadeIn();
         $(this).children('ul')...position();

    }, function () {
        $(this).children('ul').fadeOut('slow');
        $(this).children('ul')...position();
    });
});

Thanks Ingo

Now I do this:

$(document).ready(function(){
$('#access').hover(function () {
    $(this).children('ul').stop().animate({opacity:1, paddingTop:'10px'}, 400);

}, function () {
    $(this).children('ul').stop().animate({opacity:0, paddingTop:'0px'}, 300);
});

});

Fadein and the padding works great. But not by fadeOut. What´s my mistake?

this answer for parallel animations http://stackoverflow.com/questions/811750/how-can-i-get-jquery-to-execute-animations-in-exact-parallel — Crab Bucket, Feb 03 '12 at 11:03
check out example in my answer.. I have been using it and loved it alot. — dku.rajkumar, Feb 03 '12 at 12:21

score 2 · Answer 1 · answered Feb 03 '12 at 11:50

the best i can think of is to make use of jQuery swichClass . It uses animate implicitly.

check out this fiddle example : http://jsfiddle.net/xyDwV/1/

CSS:

.before{
    background-color : red;
    height : 400px;
    width :200px;
    opacity : 1;
}
.after{
    background-color : blue;
    height : 200px;
    width : 400px;
    opacity : 0.5;
}

jquery:

$(document).ready(function(){
  $('#mydiv').hover(function () {
        $(this).switchClass('before','after',500);
    }, function () {
        $(this).switchClass('after','before',500);
  });
});

score 0 · Answer 2 · answered Feb 03 '12 at 11:05

0

simply roll your own animation with animate(). and never forget to use stop to cancel the currently running animation first.

$(this).find('ul').stop().animate({opacity:1, top:'...', left:'...'});

answered Feb 03 '12 at 11:05

roman

11,143
1
31
42

Thanks a lot roman. I try something ... see my edited question, please. – ogni Feb 03 '12 at 12:47

Multiple jQuery-Effects parallel at same time

2 Answers2