Develop Reference

Animating class toggle/element swap

I've written a function that swaps a "Menu" button with a "Close" button when clicked (hiding one div and displaying another), and vice versa. I'm struggling to add an animation to the toggle of each swap.
This is what I have:
$(document).ready(function() {
$('#menu-button').on('click', function() {
$('#menu-button').toggleClass('inactive', 1000);
$('#close-button').toggleClass('inactive', 1000).toggleClass('active', 1000);
});
$('.close-trigger').on('click', function() {
$('#close-button').toggleClass('active').toggleClass('inactive', 1000);
$('#menu-button').toggleClass('inactive', 1000).toggleClass('active', 1000);
});
});
I've also tried fadeIn/fadeOut/fadeToggle instead of toggleClass to no avail. The problem with fadeToggle is that both elements briefly appear at the same time, and there's still no fade animation. Is there a better way to program this?

please try this
$(document).ready(function() {
$('#button1').on('click', function() {
$('#button1').hide();
$('#button2').show().addClass('toggle');
});
$('#button2').on('click', function() {
$('#button2').hide();
$('#button1').show().addClass('toggle');
});
});
#button2
{
display:none;
}
.button.toggle
{
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button id="button1" class="button" >button1</button>
<button id="button2" class="button" >button2</button>

If you wish to use toggleClass, you must accompany it with a CSS transition in your stylesheet. Otherwise, the element will simply disappear, as toggleClass does not provide animation by itself.
A CSS transition would be simple to add to your stylesheet, all that would be necessary would be to place these properties on the rule for your class:
transition-property: all;
transition-duration: 0.5s; /* or however long you need it to be */
Remember that properties such as display cannot be animated, so you must control the appearance using a property such as opacity, which can be animated because it is a number.

toggleClass() doesn't allow animation. The second argument is not the time. See the docs:
http://api.jquery.com/toggleclass/
I guess the best for you would be CSS transition:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
If you don't want to use transition, that would do the thing:
$('#menu-button').on('click', function() {
$('#menu-button').hide();
$('#close-button').fadeIn();
});
$('.close-trigger').on('click', function() {
$('#close-button').hide();
$('#menu-button').fadeIn();
});

Transition on Stretching Div

I have a div with some content in it, and I am showing a button with jQuery. I want to fade it in thus I used:
setTimeout(function() {
jQuery('#button').css('opacity', 1);
}, 100);
First, on html, I have set the button's html to display:none; opacity: 0 I have achieved showing/hiding button, however when it shows, it's making the div stretch instantly. Instead, I want the parent div to expand with transition.
I have created a Fiddle: https://jsfiddle.net/atg5m6ym/7450/ . In this example, when I press the trigger button, I want the button to fade in as well as applying transition on the parent div.

For optimal performance, when using transitions and animations in CSS, you should stick to opacity and transform instead of display: none; and width/height.
Will quote the comment I stated above:
The way you designed this is not ideal, you should not be using
display: none; in transitions or animations. This will cause redrawing
in your browser, and you cannot transition properties with binary
settings, display just switches between states (ex: none/block), not
between values like opacity does.
What you could do is separate your content, sharing the same background color to simulate it is the same container.
Then use transform and the scale() function.
Code Snippet:
jQuery('#trigger').click(function() {
jQuery('.bottom-content').addClass('open');
})
.top-content,
.bottom-content {
background-color: lightblue;
}
.bottom-content {
transform: scaleY(0);
transition: transform 250ms ease-in;
transform-origin: top;
}
.bottom-content.open {
transform: scaleY(1);
}
.bottom-content.open #otherButton {
opacity: 1;
}
#otherButton {
margin-top: 20px;
opacity: 0;
transition: opacity 10s;
transition-delay: 250ms;
/* Separated for clarity purposes, wait for parent transition to end before starting this one*/
}
<script src="https://www.addressfinder.co.nz/assets/v2/widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<section class="top-content">
<button id="trigger">
Trigger
</button>
<br />Lalala La
<br />Lalala La
<br />Lalala La
<br />
</section>
<section class="bottom-content">
<button id="otherButton">
Test Btn
</button>
</section>
</div>
</div>

The accepted answer is overkill. Just use .fadeIn() and forget the opacity and transition settings completely. If you want to have the div expand separate from the button, just apply the effect to the div and then trigger the button effect at the end of the div effect. This snippet does the same thing as the accepted answer without any of the CSS troubles:
$(function(){
jQuery('#otherButton').hide();
jQuery('#two').hide();
});
$('#trigger').click(function() {
$('#two').slideDown(2000, function(){
$('#otherButton').fadeIn();
});
})
#container, #two {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
<div id="content">
<button id="trigger">Trigger</button>
<br>
Lalala La<br>
Lalala La<br>
Lalala La<br>
<div id="two">
<button id="otherButton">Test Btn</button>
</div>
</div>
</div>

You can combine the jquery:
jQuery('#trigger').click(function() {
jQuery('#otherButton').slideDown(300).css('opacity', 1);
})
Note that I used the slideDown() function rather than show(). Using a transition function allows you to set an execution time. show() simply toggles the css display property, but you can not transition the display property.
Updated Fiddle

Instead of adding CSS with jQuery, you can simply add a class instead.
Set this class to whatever properties you want on it, us as:
.is-visible {
opacity: 1;
}
Example Fiddle: https://jsfiddle.net/atg5m6ym/7456/
Now, CSS doesn't like to transition when switching display: none; so instead I have simply set the height: 0; and only applied necessary styling on the .is-visible class.

Jquery effect - on mouse hover background color change;

I'm trying to create an effect that's, when the mouse over this change the background color from the left to the right.
I tried this:
http://jsfiddle.net/WVWKE/
$('#div1').mouseover(function(){
$('#back').animate({width: '200px'}, 1000);
});
$('#div1').mouseout(function (){
$('#back').animate({width: '0px'}, 1000).stop();
});
#div1{
height:200px;
width:200px;
background-color:green;
float:left;
}
#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}
<div id="div1">
<div style="position:absolute">That was amazing!</div>
<div id="back">
</div>
</div>
But, is not working correctly. If i put the mouse many times on the div, this do the effect many times and don't to.
Try to put the mouse and leave many times. The effect happens many times to.
Any help?

You are using stop incorrectly. Use it like this:
$('#div1').mouseover(function (){
$('#back').stop().animate({width: '200px'}, 1000);
});
$('#div1').mouseout(function (){
$('#back').stop().animate({width: '0px'}, 1000);
});
It's easy to understand if you think about it like it's English:
$('#back') // take "back"
.stop() // and stop it
.animate({width: '200px'}, 1000); // and animate it
Fiddle

jquery mouseenter and fadeTo

I want a div to be faded to opacity 1 when mouse enters, and to 0.5 when it leaves. This is my code:
<script>
$(document).ready(function(){
$("#header").mouseenter(function(){
$("#header").fadeTo('fast', 1);
});
$("#header").mouseleave(function(){
$("#header").fadeTo('fast', 0.5);
});
}
</script>
HTML:
<body>
<div id="header">
<h1>Hello!</h1>
<p>blah blah...</p>
</div>
</body>
I have a div in the body containing one h1 and one p. Nothing happens when I move the mouse over it. Is something wrong?

Your wrong indentation hides a syntax error :
$(document).ready(function(){
$("#header").mouseenter(function(){
$("#header").fadeTo('fast', 1);
});
$("#header").mouseleave(function(){
$("#header").fadeTo('fast', 0.5);
});
}); // <= missing parenthesis
Other than that, it works. Be careful that 0.5 isn't really transparent for all color combinations.

How about css?
#header {
opacity: .5;
transition: opacity .3s ease-in-out;
}
#header:hover {
opacity: 1;
}
Just make sure to add all the css vendor prefixes. This is better than using jQuery IMO. If browser doesn't support transition or opacity it's no big deal, that's what "graceful degradation" is all about.

Jquery opacity on div hover does not work

I want to show one particular div with the use of fadeTo.
If I hover over div1, then spark1 should be visible and disappear on mouseout..
But it won't do anything when hovering and I don't really know why.
HTML
<div class="spark1"></div>
<div class="div1">text</div>
CSS
.div1 {
width:300px;
height:300px;
}
.spark1 {
position:absolute;
width:27px;
height:27px;
margin-top:70px;
margin-left:395px;
background:url(../img/spark.png) no-repeat;
}
JS
$('.div1').hover(function(){
$('.spark1').fadeTo(200, 0);
});
EDIT (update)
HTML
<div class="spark1"></div>
<div class="div1"></div>
CSS
.div1 {
width:300px;
height:300px;
background-color:#000000;
}
.spark1 {
position:absolute;
width:27px;
height:27px;
top:70px;
left:395px;
background-color:#ff0000;
filter:alpha(opacity=0); opacity:0.0;
}
JS
$('.project1').hover(function(){
$('.spark1').fadeTo(200, 1);
},
function(){
$('.spark1').fadeTo(200, 0);
});
It still won't trigger, I don't get it..

you should stop the animation if the event trigger before completion of previous. try this
$('.div1').hover(function(){
$('.spark').stop(true,true).fadeTo(200, 1);
},function(){
$('.spark').stop(true,true).fadeTo(200, 0);
});
fiddle example : http://jsfiddle.net/mK4m6/11/

Your code works if you use the correct css classes names
DEMO
You define a css class .spark { } but in you code you use the class name .spark1.
Choose one or the other.

You made a mistake in your hover function. It has 2 call back methods:
$(document).ready( function() {
$(".div1").hover(
function(event) {
//hover in
$(".spark1").fadeTo(200,1);
},
function(event) {
$(".spark1").fadeTo(200,0);
});
});​
Below is a working script:
http://jsfiddle.net/U8rzJ/7/

Building on Didier's good catch of the class names, there's a problem with your hover() script. hover() can take one or two functions as arguments - if you supply just one, it's executed on both mouseover and mouseout. You'll want this, I think:
$('.div1').hover(function(){
//fade in to 100%
$('.spark').fadeTo(200, 100);
},
function(){
$('.spark').fadeTo(200, 0);
});
This fades the .spark in on mousein and fades it back out on mouseout. If you want to animate on mouseout only, I'd switch from .hover() to .mouseout().

HTML
<div class="spark1"></div>
<div class="div1">text</div>
CSS
.div1 {
width:300px;
height:300px;
}
.spark1 {
position:absolute;
width:27px;
height:27px;
top:70px;
left:395px;
background-color:#ff0000;
filter:alpha(opacity=0); opacity:.0;
}
jQuery
$('.div1').hover(function(){
$('.spark1').fadeTo(200, 1);
},
function(){
$('.spark1').fadeTo(200, 0);
});
Then it all works out.
1. Use correct class names
2. Set the initial opacity of spark1 to 0
3. On mouseenter fade the opacity to 1
4. On mouseleave fade the opacity to 0