We Keep Coding

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');

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.

update function as below.
function toggleDivs() {
var $inner = $("#inner");
// See which <divs> should be animated in/out.
if ($inner.position().left == 0) {
$inner.animate({
opacity: 1,left: "-400px"
},2000);
}
else {
$inner.animate({
opacity: 1,left: "0px"
},2000);
}
}

Try this: http://jsfiddle.net/1cgs9evo/1/
function toggleDivs() {
var $inner = $("#inner");
if ($inner.position().left == 0) {
$inner.fadeOut('slow');
$inner.animate({
left: "-400px"
});
$inner.fadeIn('slow');
} else {
$inner.fadeOut('slow');
$inner.animate({
left: "0px"
});
$inner.fadeIn('slow');
}
}

JQuery .animate(); not working with fixed height

I've worked with this many times and have had no problem. Animating the height and/or width of a DIV either by width/height: 'toggle' or replacing 'toggle' with specified width/height.
setTimeout( function(){
$('.input-group .Advanced').animate({
height: 'toggle'
}, {
duration: 500,
});
} , 500);
height: 'toggle' - Demo on JSFiddle
height: '400px' - Demo on JSFiddle
The code snippet works perfectly fine however I need this to be set to a specific height and replacing my 'toggle' to a fixed height such as '400px' does absolutely nothing...

$('.form-control' ).click(function(e) {
$(this).addClass('InputFreezeFocus');
$(this).animate({
width: '400px'
}, {
direction: 'left',
duration: 500,
});
setTimeout( function(){
$('.input-group .Advanced').animate({
height: '400px',
opacity: 'toggle'
}, {
duration: 500,
});
} , 500);
});
The .animate() method does not make hidden elements visible as part of the effect so you have to toggle the opacity.
Link to fiddle

Your given height is not working because you have set a display:none to your .Advanced class. When you use jquery inbuilt toggle string it will take care of that and make your hidden element in view.But, when you define your own height you also have to display that element in view otherwise animation will work but not display. You can refer Jquery animate() reference .It's written there
Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given $( "someElement" ).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.
You can do this to animate your class
setTimeout( function(){
$('.input-group .Advanced').animate({
height: '500px',
opacity:'show'
}, {
duration: 500
});
} , 500);
This will get your hidden element in view.Demo of your code

using jQuery slide toggle with min height

I am trying to use jQuerys slideToggle on a div that has a minimum height. this causes the animation to jump and not move smoothly. I have spent a while now looking for a solution but i am unable to get anything to work. I have made an example on jsfiddle and would appreciate if anyone could help me solve this issue.
my css for the div being toggled:
#selected-display{
height:calc(100vh - 50px);
display:none;
min-height: 750px;
}
my javascript:
$(document).ready(function(){
$(".toggle-display").click(function(){
$("#selected-display").slideToggle("slow");
});
});
https://jsfiddle.net/4y3q27mh/

https://jsfiddle.net/rqkt58L1/
You could just disable min-height during the animation, and then turn it back on when the animation is over:
$(document).ready(function () {
$(".toggle-display").click(function () {
var minHeight = $("#selected-display").css('min-height');
$("#selected-display").css('min-height',0).slideToggle("slow", function() {
$(this).css('min-height', minHeight);
});
});
});

Answer by dave works, but there is no animation to min-height. it just "appears"
I have solve it with javascript without using min-height:
function toggle(item) {
if (item.height() < 350) {
item.css('height', 350);
}
item.slideToggle();
}

How do I add a pause in JavaScript?

I have a div like this:
<div style="width: 0%;"></div>
How can I change the css of width to 100% (and wait until it reaches 100%) before changing more elements?
For example:
$('div').css('width', '100%', function() {
$('div').css('color', 'red');
});
Obviously this doesn't work, but how can I make it work?

You can just use a timer to wait before processing some more code:
$('div').css('width', '100%');
setTimeout(function(){
$('div').css('color','red');
}, 2000);
JSFiddle

Use jQuery animate()
$("div").animate({
width:"100%"
}, 2000, function() {
//On Animation complete
$('div').css('color', 'red');
});
Fiddle

You can do it a number of ways. One way is to use CSS transitions:
.yourDiv {
width: 0%;
-webkit-transition: width;
-webkit-transition-duration: 3s;
background: yellow;
}
.yourDiv.wide {
width: 100%;
}
Then, to animate, apply the class via jQuery:
$('.yourDiv').addClass('wide')
To do something after it's done animating, use the webkitTransitionEnd event:
$('.yourDiv')
.addClass('wide')
.one('webkitTransitionEnd', function(){
$('this').css('background','red')
})
If you wan to wait for a period of time after the animation finished before triggering your next style change, wrap it in a setTimeout:
var $yourDiv = $('.yourDiv')
$yourDiv
.addClass('wide')
.one('webkitTransitionEnd', function(){
setTimeout(function(){
$yourDiv.css('background','red')
},2000)
})
fiddle: http://jsfiddle.net/22fPQ/1/
(note the above is webkit-centric. Use other browser CSS prefixes as needed to support)

jquery animate hide the scroll

i have a little issue animeting a div that is overflowed, the scroll blink during animation.
i made a fast example:
$(".div-animate").on("click", function(e){
var toTop = 100,
toHeight = $(this).outerWidth(true) + toTop;
$(this).animate({
top: toTop,
height: toHeight
});
});
live example
how can i prevent this little 'scroll blink' ?

jQuery adds an overflow:hidden rule when use animate function.
There are two hacks you can do:
1) Modify the line of the jQuery source where overflow is setted to hidden (you can do this only if you import jquery from your site)
2) Force the property in your css doing something like this
.div-animate {
overflow: auto !important;
}

Well this can be done this way too:
$(this).animate({
top: toTop,
height: toHeight
}).css({"overflow":"auto"});