iTux iTux - 1 month ago 8
Javascript Question

how can I create a slide effect between two divs with jQuery?

I'm very very new with jQuery, hope someone can help me :)

I found this page with a similar effect I'm looking for http://jsfiddle.net/k_rma/VmSX4/

But, I need to add the effect of fade In when the hidden div appears and also when this one gets back to hide.

I tried to add an effect from Animate css but it didn't work

Thanks :)

$('#yourElement').addClass('animated bounceOutLeft');

Answer

Is this what you are looking for? Instead of moving the inner div left and right, we keep the home and member-home divs at the same spot with one as hidden using css.

#member-home {
    display:none;
    position:absolute;
    left:0px;
    width: 400px;
    height: 600px;
    background-color: green;
}

Then on button click we just use fadeToggle() with animation duration as 2000 to fade in the first showing div and fade out the hidden div and vice versa. No need of a seperate function with if-else conditions.

$("button").bind("click", function() {
    $("#home").fadeToggle(2000);
    $("#member-home").fadeToggle(2000);
});

Here is example code.

http://codepen.io/Nasir_T/pen/vXPjqy

Hope this helps.

Comments