We Keep Coding

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/

jquery/js - Using click function animate.css to animate and show another element

I'm refering animate.css from this site http://www.telegraphicsinc.com/2013/07/how-to-use-animate-css/
1- I have click function :
function animationClick(element, animation){
element = $(element);
element.click(
function() {
element.addClass('animated ' + animation);
//wait for animation to finish before removing classes
window.setTimeout( function(){
element.removeClass('animated ' + animation);
}, 2000);
});
}
2- I'm called the function here,but I want to change a bit,if i'm clicking the (#container) it will animate and show (.content) below:
$(document).ready(function(){
$('#container').each(function() {
animationClick(this, 'bounce'); // how I modified this line
$('.content').show(); // I want to show and animate bounce for (.content) not (#container)
});
});

I have solved my problem :)
$(function() {
$("#container").click(function() {
$(".content").show();
animate(".content p", 'animated bounceInDown');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}

JavaScript slide menu toggle

I am trying to create a toggle because for some reason the toggle function is not working.
this works as expected. it basically does the animation an a couple of css call then swaps classes for the next function call.
$(document).ready(function() {
$(".m-menu").click( function(){
if ($('.mobile-menu').hasClass("menu") ) {
$(".mobile-menu").animate({left: '0'}, 500);
$(".mobile-menu-bg").animate({left: '0'}, 500);
$(".menu-close").css('display','inline');
$(".menu-open").css('display','none');
$( '.m-menu' ).removeClass( "m-menu" ).addClass("m-menu2");
}
});
});
The next function looks like this, which is suppose to execute if the class is there, then switch back to the original class. What am I doing wrong here?
$(document).ready(function() {
$(".m-menu2").click( function(event){
event.preventDefault();
if ($('.mobile-menu').hasClass("menu") ) {
$(".mobile-menu").animate({left: '-200'}, 500);
$(".mobile-menu-bg").animate({left: '-2000'}, 500);
$(".menu-close").css('display','none');
$(".menu-open").css('display','inline');
$('.m-menu2').removeClass( "m-menu2" ).addClass("m-menu");
}
});
});

Add stop to setInterval on hover via jQuery

JS:
setInterval(function(){ $("#nav #nextslide").click()},10000);
HTML:
click.
I want when hover on a button, stop setInterval.
How can I do it?
UPDATED: Thank you for all answers. All soluitons working on static structure. But my a tag get via ajax. So, I think must on option. (jQuery version 2.0.3) Right?

var interval = setInterval(function(){ $("#nav #nextslide").click()},10000);
and on hover callback:
clearInterval(interval);

You can setinterval id. and later can clearInterval whenever you want to stop executing it.
ar refreshIntervalId = setInterval(function(){$("#nextslide").click()}, 10000);
/*On Hover */
$( ".gallery.form_click" ).mouseenter( function(){
clearInterval(refreshIntervalId);
})

Just give the interval function a name so you can refer to it later with .clearInterval.
Start interval function:
nameOfIntervalFunction = setInterval(function(){$("#nav #nextslide").click()},10000);
Stop interval function with hover:
$( "a.gallery.form_click" ).mouseenter( function(){
window.clearInterval(nameOfIntervalFunction)
})

clearInterval() is used to stop the interval.
Use event delegation as a is appended dynamically.
Write:
var t = setInterval(function () {
$("#nav #nextslide").click()
}, 10000);
$(document).on("hover","a",(function () {
clearInterval(t);
});
DEMO here.

try hover-in and hover-out function on your anchor tag, make your interval global so it can be stop and start:
var interval=setInterval(function(){ $("#nav #nextslide").click()},10000);
$( ".gallery" ).hover(
function() {
clearInterval(interval);
}, function() {
interval = setInterval(function(){ $("#nav #nextslide").click()},10000);
}
);
if a tag is dynamic then use jQuery on():
var interval=setInterval(function(){ $("#nav #nextslide").click()},10000);
$( ".gallery" ).on(
mouseenter: function() {
clearInterval(interval);
},
mouseleave: function() {
interval = setInterval(function(){ $("#nav #nextslide").click()},10000);
}
);
and for only stop on hover:
$('.gallery').on("hover",(function () {
clearInterval(interval);
});

Help needed Pausing/Resuming FadeIn and FadeOut

Hopefully this is a simple request. I found this code that will work perfectly for what I want to do (Rotate through list items while fading in and out) http://jsfiddle.net/gaby/S5Cjm/1/ . However, I am looking to have the animation pause on mouse over and resume on mouse out. I am a novice at the moment with Javascript and JQuery, so any help would be appreciated.
Thanks.
EDIT: Side questions: Is there a benefit to using JQuery to do this? Would a stand alone script be more appropriate?

I attached the hover event to your list items. The over function stops the animation and all following animations using jQuery.stop(true). The out function resumes the animation:
http://jsfiddle.net/US4Fc/1/
var duration = 1000
function InOut(elem) {
elem.delay(duration).fadeIn(duration).delay(duration).fadeOut(
function() {
if (elem.next().length > 0) {
InOut(elem.next());
}
else {
InOut(elem.siblings(':first'));
}
});
}
$(function() {
$('#content li').hide().hover(
function() {
$(this).stop(true)
},
function() {
var curOp = Number($(this).css("opacity"));
$(this).fadeTo(duration*(1-curOp), 1, function() {
InOut($(this))
});
}
);
InOut($('#content li:first'));
});

Will this work for you?
$(function(){
var active;
$('#content li').hide().hover(
function(){
active = $(this).stop();
},
function(){
active && InOut(active);
}
);
InOut( $('#content li:first') );
});