How to both fade and slide jQuery animation

Question

I have this written, but the animations are colliding. How to changes this to work correctly?

 function () { 
$("#presentState").show("slide", { duration: 1500, easing: 'easeOutBack', direction: directionActive }); 
$("#presentState").fadeIn( 1500,  'easeOutBack'); 
}

I also have tried this and it doesn't work at all.

 $("#presentState").show("slide", { duration: 1500, easing: 'easeOutBack', direction: directionActive }).fadeIn(1500, 'easeOutBack').dequeue();

Answer 1

this is my first reply in stackoverflow and I'm hoping for agreements from you,thanks~

I have add 2 more effects based on jquery UI effect, they are slideFadein and slideFadeout You can image what the effect is like from the name: slide and fade in/out at the same time. The usage is just similar as other effects:

//this will slide up and fade out the element
$("#effect").effect("slideFadein",{},500);

//this will remove the element after effect end
$("#effect").effect("slideFadein",{mode:'remove'},duration);

jquery UI effect: jqueryui.com/effect

jsFiddle:jsfiddle.net/rw42S

You can use these two effects by save below code in a javascript file and include after jquery.ui.js or just paste them into jquery.ui.js

Here is my code:

(function( $, undefined ) {
    $.effects.effect.slideFadeout = function(o,done){
        // create element
        var el = $( this ),
            props = [ "width" , "height" , "opacity"],
            speed = o.duration || 500,
            // 'hide' or 'remove'
            mode = o.mode || 'hide',
            animation,wrapper;

        // save properties
        $.effects.save( el, props );

        animation = {
            height: "0px",
            opacity: "0"
        };

        // create wrapper
        wrapper = $.effects.createWrapper( el ).css({
            overflow: "hidden"
        });

        // animate
        wrapper.animate(animation,speed,'swing',function(){
            if(el[mode]) el[mode]();
            // restore properties
            if(mode == 'hide') $.effects.restore( el, props );
            // remove wrapper
            $.effects.removeWrapper( el );
            // callback
            done();
        });
    };

    $.effects.effect.slideFadein = function(o,done){
        // create element
        var el = $( this ),
            speed = o.duration || 5000,
            props = [ "height" , "opacity"],
            animation,wrapper;

        animation = {
            height: el.outerHeight(true) + "px",
            opacity: "1"
        };

        // save properties
        $.effects.save( el, props );

        // show element to get correct width(if the element has no width)
        el.css({ height: "0px" }).show();

        // create wrapper
        wrapper = $.effects.createWrapper( el ).css({
            overflow: "hidden",
            opacity: "0",
            height: "0px"
        });

        // restore properties
        $.effects.restore( el, props );

        // animate
        wrapper.animate(animation,speed,'swing',function(){
            // remove wrapper
            $.effects.removeWrapper( el );
            // callback
            done();
        });
    };
})(jQuery);

Answer 2

This is what I have ended up doing:

function () {
$("#presentState").show("slide", { duration: 1500, easing: 'easeOutBack', direction: directionActive }).hide(); 
$("#presentState").fadeIn(1500).dequeue(); 
}

I had to use .hide(); at the end of the first function call.

Answer 3

You can animate multiple CSS properties by sending a property map to animate:

Hide:

$("#presentState").animate({ marginLeft: "-1000px", opacity: 0 }, 1500);

Show:

$("#presentState").animate({ marginLeft: "0", opacity: 1 }, 1500);