CODEWITHSUNDEEP
jqueryjquery-uianimationjquery-animate
Omar
Omar

Reputation: 55

Show/Hide Clip Effect with Fade

Need help in figuring out how to add a fade out/in to the following:

$(function(){               
    $('#menu').stop(true, true).hover(function(){   
            $('.content').stop(true, true).delay(300).show(
                "clip",
                {direction: "vertical"}, 
                200       
            );                          
        },
        function(){ 
            $('.content').stop(true, true).hide( 
                "clip",
                {direction: "vertical"}, 
                200 
            );
        }); 
});

When the animation clip occurs on show/hide, I want it to fade in/out simultaneously with the clip, but currently it simply queues if I add .animate or .fadeIn/Out.

(Using jQuery and jQuery UI)

Example jsFiddle

Any ideas?

Upvotes: 2

Views: 8079

Answers (1)

kapa
kapa

Reputation: 78731

You can use .animate() instead of .fadeIn()/.fadeOut(), it can be passed an option (queue : false) that can make the animation run at once, instead of placing it in the queue.

An example based on your code (just set opacity to zero by default):

$('.content')
    .stop(true, true)
    .show( "clip",{direction: "vertical"}, 800 )
    .animate({ opacity : 1 }, { duration: 800, queue: false });

jsFiddle Demo

Upvotes: 4

Related Questions