We Keep Coding

Animate JQuery slide-in on left and slider-in on right

i would like to ask how can I add smooth slide-in animation when button is hovered? This is a working code but it does not have smooth slide in or out. THank you for your help.
<script>
$(document).ready(function(){
$(".holding-btn").hover(function() {
$(".advisory .kn--child-1.show-on-hover--1").show();
$(".advisory .kn--child-2.hide-on-hover--1").hide();
}, function () {
$(".advisory .kn--child-1.show-on-hover--1").hide();
$(".advisory .kn--child-2.hide-on-hover--1").show();
});
});
</script>
<script>
$(document).ready(function(){
$(".advisory-btn").hover(function() {
$(".holding .kn--child-1.show-on-hover--2").show();
$(".holding .kn--child-2.hide-on-hover--2").hide();
}, function () {
$(".holding .kn--child-1.show-on-hover--2").hide();
$(".holding .kn--child-2.hide-on-hover--2").show();
});
});
</script>

I have the JS script that makes one div disappear when showing another one. How to add fadein effect?

Here's my jsfiddle. The script itself is here:
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
$(".div1, .div2").hide();
if ($(this).attr("class") == "link1")
{
$(".div1").show();
}
else
{
$(".div2").show();
}
});
});
How can I add smooth fadein effect when one div disappears and the other one shows up? Thanks!

$(".div1").fadeIn();
$(".div2").fadeOut();
Running example:
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
var e = $(this);
$(".div1, .div2").fadeOut().promise().done(function() {
if (e.attr("class") == "link1"){
$(".div1").fadeIn();
} else {
$(".div2").fadeIn();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Link 1
Link 2
<div class="div1">I'm div1</div>
<div class="div2">I'm div2</div>
The promise() is used to avoid the collision between fadeOut and fadeIn transitions

It looks like you need the fadeIn() method from jQuery, as explained in the docs:
The .fadeIn() method animates the opacity of the matched elements. It is similar to the .fadeTo() method but that method does not unhide the element and can specify the final opacity level.
if ($(this).attr("class") == "link1") {
$( "#div1" ).fadeIn( "slow", function() {
// Animation complete
});
} else {
$( "#div2" ).fadeIn( "slow", function() {
// Animation complete
});
}
Instead of slow you can also use a number for indicating the fade-in time, in milliseconds.

updated your fiddle.
simply replace show() with fadeIn()
http://jsfiddle.net/cEJtA/572/

Making a menu with toggle which can be animated using the top property

I'm trying to make a toggle button, so when you click once on #mbtn, it must be set to top:0px and when you click a second time, it must be set to top:-110px.
Here is the code I'm using but it seems like it's not working, where am I wrong?
<script>
$(document).ready(function() {
$('#mbtn').toggle(
function() {
$('.menu').animate({
top: "0px"
}, 500);
},
function() {
$('.menu').animate({
top: "-110px"
}, 500);
}
);
});
</script>

Per jQuery API, you have to use toggle with an action, such as click. For example:
$( "#mbtn" ).click(function() {
$( ".menu" ).toggle( "slow", function() {
// Animation complete.
});
});
JSfiddle
I assume you were trying to hide the menu bar? if so, take a look at .slideToggle() instead. Here is the JSfiddle example.

Add slideup callback to animate Jquery

I have the below html
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<div id="vis"></div>
<style>li {position: relative;}</style>
On click I want to move the clicked item to the left 50px then slide it up then output how many list items are now visible in my div with the id vis.
If I do the below it counts 1 to many because the animation hasn't completed when I add the length see fiddle.
<script>
$("li").on("click", function () {
$(this).animate({
"left": "+=50px"
}).slideUp(300);
var visNum = $('li:visible').length;
$('#vis').text(visNum);
});
</script>
If I just do hide() I get the expected output in the vis div but don't get the animation I require. See Fiddle
<script>
$("li").on("click", function () {
$(this).hide();
var visNum = $('li:visible').length;
$('#vis').text(visNum);
});
</script>
and if I try a callback, I get a similar result to my first attempt. See Fiddle
<script>
$("li").on("click", function () {
$(this).animate({
left: "+=50px",
}, 300, function() {
$(this).slideUp(300);
var visNum = $('li:visible').length;
$('#vis').text(visNum);
});
});
</script>
What is the best way to do this so that after you click an item it animates left, slides up then outputs the remaining visible list items?

slideUp has a complete() callback. http://api.jquery.com/slideup/
<script>
$("li").on("click", function () {
$(this).animate({
"left": "+=50px"
}).slideUp(300, function(){
var visNum = $('li:visible').length;
$('#vis').text(visNum);
});
});
</script>
And for completion... http://jsfiddle.net/fjqmj/4/

Try this :
While taking visible li, just filter the current one with .not(this). This may not be the best approach but it works for you.
$("li").on("click", function () {
$(this).animate({
"left": "+=50px"
}).slideUp(300);
var visNum = $('li:visible').not(this).length;
$('#vis').text(visNum);
});
Demo

fadeToggle seems to make the hidden div jump up

Hello I have two divs that fadeToggle with a timer as follows
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
Javascript to make it toggle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow");
$('#div2').fadeToggle("slow");
}
Here is fiddle link http://jsfiddle.net/BnYat/
My issue is that the second div shows up before the first div is done toggle and then causes a jump up to the top.
If there a way to create a smooth transition from one div to the next without the jump effect happening?

A simple solution is to put both div elements in a single container, and position them absolutely:
<div id="container">
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
</div>
#container div {
position: absolute;
}
Example fiddle
Alternatively, you could fade one out completely then fade the next in in the callback:
setInterval(ToggleDiv, 5000);
function ToggleDiv(){
$('#div1').fadeToggle("slow", function() {
$('#div2').fadeToggle("slow");
});
}
Example fiddle

$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow", function(){
$('#div2').fadeToggle("slow");
});
}

just use animate
$( "#div1" ).animate({
visibility:hidden
}, 5000, function() {
// Animation complete.
});
$( "#div2" ).animate({
visibility:visible
}, 5000, function() {
// Animation complete.
});

Try this
setInterval(ToggleDiv, 5000);
function ToggleDiv() {
var div = "#" + $('div:visible').attr('id');
var div2 = "#" + $('div:not(:visible)').attr('id');
$(div).fadeToggle("slow", function () {
$(div2).fadeToggle("slow");
});
}
DEMO
or
function ToggleDiv() {
if ($('#div1').is(':visible')) {
$('#div1').fadeToggle("slow", function () {
$('#div2').fadeToggle("slow");
});
} else {
$('#div2').fadeToggle("slow", function () {
$('#div1').fadeToggle("slow");
});
}
}
DEMO