iTux iTux - 1 month ago 12
CSS Question

Slide effect between two divs with jQuery?

I found this JSFiddle with a similar effect I'm looking for

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

$('#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.