Develop Reference

Jquery Animation Menu

I put together a jQuery animation for a menu background. The menu has a dropdown and when you hover over the menu the animation kicks in, but the dropdown starts to act all wonky. Pretty new to jquery so not sure why this is doing that.
I added a div (menu-bg) with absolute position to change height on hover inside the menu.
Here is my javascript controlling the animation:
$('.navbar-nav >li > a').hover(
function() {
$(this).stop().next().animate({
height: "60px"
}, {
easing: "swing",
queue: true,
duration: 400
});
},
function() {
$(this).stop().next().animate({
height: "0px"
}, {
easing: "swing",
queue: true,
duration: 200
});
});
Here is a link to the site to view the actual issue, you will notice it when you hover over home.
http://bratworks.com/static

I found the following changes in your code got the job done:
Inside of init.js around line 15 remove the 200 millisecond delay from the dropdown menu fadeOut().
$(this).find('.dropdown-menu').stop(true, true).delay(0).fadeOut();
I re-wrote your hover function to target the li's instead of the a, it looked like there was some kind of conflict there:
$('.navbar-nav > li').on({
mouseenter: function() {;
$(this).find('.menu-bg').animate({ height: "60px" });
},
mouseleave: function() {
$(this).find('.menu-bg').animate({ height: "0px" });
}
});
And finally, I overwrote the CSS that was creating that 5px margin gap on the .dropdown-menu:
.dropdown-menu {
margin-top:0px!important;
}
There you go! Please let me know if you'd like me to expand on anything?

Create a jquery fixed animation without some overlapping animation

I have this animation http://codepen.io/DWboutin/pen/DFJze
When i go fast over these tabs, the animations makes really weirds things.
How can i stop that? I tried .stop(true,true), i tried to create queue but i can make this cleaner.
This function is triggered when mouseenter
var becomeBigger = function(element){
deplace(element.index(),function(){
element.dequeue();
element.queue(function(){
$(this).animate({top: '118px', height: '435px',width: '248px'},settings.timeAnimIn,settings.easingIn,function(){
$(this).addClass('active');
deplace(element.index());
});
$(this).children('.img').children('.noiretblanc').animate({'opacity':0},settings.timeAnimIn,settings.easingIn);
$(this).children('.img').children('.couleur').animate({opacity: 1, top: '-321px'},settings.timeAnimIn,settings.easingIn);
$(this).children('.img').animate({height: '321px'},settings.timeAnimIn,settings.easingIn);
$(this).children('.titre').animate({height: '57px', width: '228px', backgroundColor: '#4696a7'},settings.timeAnimIn,settings.easingIn);
$(this).children('.titre').children('h2').animate({fontSize : '22px'},settings.timeAnimIn,settings.easingIn);
$(this).children('.titre').children('h3').animate({fontSize : '18px'},settings.timeAnimIn,settings.easingIn);
$(this).children('.btn-verso').css({backgroundPosition : '0 0'});
$(this).dequeue();
});
});
}
And this one on mouseleave
var recoverSize = function(element){
replace(element.index(),function(){
element.queue(function(){
$(this).removeClass('active');
$(this).animate({top: '148px',height: '385px',width: '214px'},settings.timeAnimOut,settings.easingOut);
$(this).children('.img').children('.noiretblanc').animate({'opacity':1},settings.timeAnimOut,settings.easingOut);
$(this).children('.img').children('.couleur').animate({opacity: 0, top: '-277px'},settings.timeAnimOut,settings.easingOut);
$(this).children('.img').animate({height: '277px'},settings.timeAnimOut,settings.easingOut);
$(this).children('.titre').animate({height: '50px', width: '194px', backgroundColor: '#959595'},settings.timeAnimOut,settings.easingOut);
$(this).children('.titre').children('h2').animate({fontSize : '20px'},settings.timeAnimOut,settings.easingOut);
$(this).children('.titre').children('h3').animate({fontSize : '16px'},settings.timeAnimOut,settings.easingOut);
$(this).children('.btn-verso').css({backgroundPosition : '0 -72px'});
$(this).dequeue();
});
});
}
Thank you for all your help

You need to stop all animations before you start the current animation, this is easy to do with jQuery:
stop()

you can use
.stop(false, true).animate(...);
or something with clearQueue()
http://api.jquery.com/clearQueue/

Animating a div when hovered

I have a navigation bar that sticks out a little bit from the right edge of the screen. I want it so when you hover on the div, it slides left 550px out of the right side of the browser. I'm using jquery's animate function and I got it to animate properly when hovered, but I can't get it to slide back to the right when you stop hovering on it.
I'm very new to javascript/jquery and I feel like I'm missing something simple...
$(document).ready(function(){
$("#nav").hover(function() {
$(this).animate({
right: "0px",
}, 800 );
(function() {
$(this).animate({
right: "-550px",
}, 800 );
});
});
});
And here's #nav's css:
#nav {
position: absolute;
right: -550px;
min-width: 300px;
top: 10px;
height: 50px;
background-color: #B30431;
}

The code has some syntax errors. The code should be :
$(document).ready(function(){
$("#nav").hover(
function() {
$(this).animate({ right: "0px" }, 800 );
},
function() {
$(this).animate({ right: "-550px" }, 800);
}
});
});
Good Luck !!

You have made your hover function complicated, you have wrapped the function with () and your function is not executed.
$(document).ready(function() {
$("#nav").hover(function() {
$(this).animate({ right: "0px" }, 800);
}, function() {
$(this).animate({ right: "-550px" }, 800);
});
});​

One option, which we use a lot for our animation, is to make a css class that contains that animation, and then ise the .addClass() method to trigger the animation. Its fast, and its browser compatible. You could also use pure css for this.

You could try this...Demo
$(document).ready(function(){
$("#nav").mouseover(function(){
$(this).delay(200).animate({right: "0px"}, 800 );
// Added a 200ms delay to prevent quick accidental mouse overs triggering animation.
});
$("#nav").mouseout(function(){
$(this).clearQueue();
// Gives the user the ability to cancel the animation by moving the mouse away
$(this).animate({right: "-550px"}, 800 );
});
});

Possible to toggle/animate between two sizes using jQuery?

Basically I have a small div that is initially styled to 60x60. I have created click event that animates the expansion of the div:
$("#myDiv").click(function () {
$(this).animate(
{
width: "350px",
height: "300px"
}, 500);
}
I would like to reverse this animation if someone clicks the div again. Is there anyway to toggle between the original size and the expanded size (still using the animate function) with each click?
I found the toggleClass function but I don't think this will work with animiate.
You can see a basic fiddle here: http://jsfiddle.net/NS9Qp/

$("#myDiv").toggle(function() {
$(this).stop().animate({
width: "350px",
height: "300px"
}, 500);
}, function() {
$(this).stop().animate({
width: "60px",
height: "60px"
}, 500);
});
Example.
The jQuery toggle() function allows you to define two or more functions to cycle through on each mouse click. In this case, the first one (triggered on the first click) expands the div and the second one (triggered on the second click) resets it. On the third click, it starts back at the first one, and so on.
More about toggle() here.

just to be different :
var size=[];
$("#cornerBox").click(function(){
$(this).width() >= 350 ? size=[60, 60] : size=[350, 300];
$(this).stop().animate({ width: size[0], height: size[1] },500);
});
Fiddle: http://jsfiddle.net/NS9Qp/1/

I ended up using jQuery UI's animated toggleClass effect: http://jqueryui.com/demos/toggleClass/
super simple code:
$('h2').click(function() {
$(this).next().toggleClass("hidden", 1000);
});

Do not hardcode css styles (in my example I used inline css for myDiv element, put this in css files).
<div id="myDiv" style="background:red; width: 60px; height: 60px;"></div>
<script type="text/javascript">
var div = $('#myDiv');
div
.attr('defWidth', div.width())
.attr('defHeight', div.height())
.toggle(function() {
$(this).stop().animate({width: "350px", height: "300px"}, 500);
}, function() {
$(this).stop().animate({width: $(this).attr('defWidth'), height: $(this).attr('defHeight')}, 500);
}
);
</script>

What I do for cases like this, is store a transformation array.
var transforms = { 'height0': 60, 'width0': 60, 'height1': 300, 'width1': 350};
Then, store a toggle between 0 or 1, and use the corresponding values for the animation.
EDIT: combine this with the previous example of toggle, and you've got yourself a solid working solution!

Jquery hover action diappears when going to next div

Im new to learning JQuery. Im doing a sample from JQuery Novice to Ninja and Im getting an error when I move my mouse over then next item. The #navigation_blob dissapears it could be a css problem for all I know but run the code tell me what you think I need to do. Im using the easing plugin
$(document).ready(function () {
$('<div id="navigation_blob"></div>').css({
width: $('#navigation li:first a').width() + 10,
height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation');
$('#navigation a').hover(function () {
$('#navigation_blob').animate(
{ width: $(this).width() + 10, left: $(this).position().left },
{ duration: 'slow', easing: 'easeOutElastic', queue: false }
)
}, function () {
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
{duration: 'slow', easing: 'easeOutCirc', queue: false}
)
.animate({
left: $('#navigation li:first a').position().left }, 'fast'
);
});
});
<style type="text/css">
#navigation li
{
display:inline-block
}
#navigation_blob
{
background-color:Blue; position:absolute; float:left
}
</style>
<ul id="navigation"><li>Home</li><li>About Us</li><li>Buy!</li><li>Gift Ideas</li></ul>

I think your problem is the width: 'hide' in the first .animate() of the second .hover() function:
//...
}, function () {
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
//...
I think your blob will, essentially, have display: none; once that animation completes so further manipulations of its width or position will have no visible effect. If you say {width: 0} it should work okay: http://jsfiddle.net/ambiguous/YaVzd/
You can also try adding an explicit .show() before the hover-in animation but that produces some odd effects: http://jsfiddle.net/ambiguous/uH9yJ/1/

It looks like the version of jQuery is the culprit here. In this fiddle everything looks fine (using jQuery 1.4.2). However, if you change the version to 1.4.4 (the latest version), things start acting weird. Additionally, I downloaded the code from this book and it looks like the version of jQuery that this sample is using 1.4.
This makes sense if the author's update log is correct. According to the plugin's website, the last update was 12/11/07, which may mean development has stopped, but at the very least it probably means the plugin is out of date.
Hope that helps.