I used the jQuery mouseout and mouseenter function. But is not working good. Because when you go fast over the items. I get verry crazy effects. I used this code:
$('.hover').css('opacity', 1);
$('.controlNav li').mouseover(function() {
$('.hover', this).css({ display: 'block' }).animate({ top: -73, opacity: 1 }, 450, 'swing' );
}).mouseout(function(){
$('.hover', this).css({ display: 'none' }).animate({ top: -60, opacity: 0 });
});
How can i fix my problem?
I added in .stop() just before the animation which will stop the animation in place and should stop the jumping.
$('.controlNav li').mouseover(function() {
$('.hover', this).css({ display: 'block' }).stop().animate({ top: -73, opacity: 1 }, 450, 'swing' );
}).mouseout(function(){
$('.hover', this).css({ display: 'none' }).stop().animate({ top: -60, opacity: 0 });
});
The problem originaly is not mouseout or mouseover events. They are working as they should to work. It means even if you mouse over the element for just 1ms it will work.
Solution for this problem is delaying the action. You should wait a certain amount of miliseconds to do what you want happens.
You can do it manually or you can just use jQuery hover intent plug in that implemented this very nice and easy to use.
It's better to not use mouseout or mouseover event and use jQuery .hover() (if you are using the plug in .hoverIntent() for more clean and readable code.
set some variable as mutex, like:
var isActive = false;
('.hover').css('opacity', 1);
$('.controlNav li').mouseover(function() {
if(isActive) return false;
isActivce = true;
$('.hover', this).css({ display: 'block' }).animate({ top: -73, opacity: 1, complete: function(){isActive = false} }, 450, 'swing' );
}).mouseout(function(){
$('.hover', this).css({ display: 'none' }).animate({ top: -60, opacity: 0 });
});
.mouseover() and .mouseout() give strange results because mouseover() fires more than once while your mouse is still inside the element. Simple mouse movement will trigger it again & again.
.mouseenter() and .mouseleave() are better because they are only supposed to fire one time upon entering or leaving the element. However, they still do not seem to function as well as .hover() which combines them together into one method.
Also adding a .stop() will stop the current animation before starting a new one. .stop(true, false) will clear anything in the animation queue and not allow the current animation to complete.
$('.controlNav li').hover(
function() {
$('.hover', this).css({ display: 'block' }).stop(true, false).animate({ top: -73, opacity: 1 }, 450, 'swing' );
},
function() {
$('.hover', this).css({ display: 'none' }).stop(true, false).animate({ top: -60, opacity: 0 });
});
http://api.jquery.com/hover/
http://api.jquery.com/stop/
Related
I have this hover function for animating my imgs which works but after words when you re-size the window the images do not re-align with the width of the window, before the hover event the images will re-align, how do I reset the images after hover event show the images can be re-sized with the window?
$('.gallery img').hover(function(){
$('.gallery img').each(function(){
$(this).css({'top': $(this).offset().top, 'left': $(this).offset().left});
});
$('.gallery img').css({'position': 'absolute', 'z-index': 1});
$(this).css('z-index', 10);
$(this).animate({
width: "+=14",
height: "+=14",
left: "-=7",
bottom: "-=7"
});
}, function(){
$(this).css('z-index', 1);
$(this).animate({
width: "-=14",
height: "-=14",
left: "+=7",
bottom: "+=7"
});
});
You have supplied 2 functions for the hover().
E.g. .hover(function(){},function(){})
The first one is when the mouse enters, and the second one is when the mouse leaves.
I suspect the culprit is:
.css({'position': 'absolute', 'z-index': 1});
In the second function, try setting position: static. I would say after the animation.
I'm trying to apply a CSS transition to an element, but at some point before it completes, remove the transition entirely and start another one.
This question answers how to stop a transition in its tracks, but I modified the jsFiddle there to illustrate the issue:
http://jsfiddle.net/zXVLd/
var $div = $('div');
$div.click(function(){
$div.css({
left: 0,
transition: 'none'
});
$div.transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
What I want to happen is for the box to reset its position and move down when clicked, and for the completed handler on the first transition to not fire.
What does happen is the box resets its position when clicked, but doesn't move down until the first transition completes (even though the motion from the first transition is no longer happening). The completed handler still fires on the first transition as well.
I've updated your fiddle with the clearQueue method: http://jsfiddle.net/zXVLd/1/
var $div = $('div');
$div.click(function(){
$div.clearQueue().css('left', $div.css('left')).transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
That does the trick. See http://api.jquery.com/clearQueue/ for more information on the clearQueue method.
To do this kind of animations, you can try to use GSAP's TweenLite. It's incredible what you can achieve with it. http://www.greensock.com/jump-start-js/ If you include this on your page and add the following code:
div.bind('click', function(e) {
// note that you can animate two directions, from and to
TweenLite.from(div /*element*/, 0.2 /*easing in seconds*/, {
// the css, but for positioning elements you can also use x and y.
x: 600,
easing: linear,
onStart: function() {
Stuff you want to do before the animation
},
onComplete: function() {
Stuff you want to do after animationg
}
});
});
The plugin which you use is using queue. So, it is just enough to call $div.dequeue(); I.e.
var $div = $('div');
$div.click(function(){
$div.dequeue();
$div.css({
left: 0,
top: 0,
transition: 'none'
});
$div.transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
fiddle -> http://jsfiddle.net/krasimir/zXVLd/2/
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/
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 );
});
});
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!