i'm currently trying to sort out a problem with the following script. When you hover over a certain area it should make the div appear pretty much instantly, then when you leave that area it should disappear after a set amount of time.
This all works like a charm but the problem is if you leave the browser page frame with the mouse after hovering over it, it bodges up and the div wont appear when you hover over it anymore.
Any help would be greatly appreciated, thank you
$('.loginHider').mouseenter(function(){
$('.loginBar').stop(true, true).animate({marginTop: '0px'}, 150);
$('#loggedIn').stop(true, true).animate({marginTop: '20px'}, 150);
}).mouseleave(function(){
setTimeout(function() {
$('.loginBar').stop(true, true).animate({marginTop: '-50px'}, 150);
$('#loggedIn').stop(true, true).animate({marginTop: '-30px'}, 150);
}, 1200);
});
~Matt
Try
$('.loginHider').mouseenter(function () {
//clear the existing timer
clearTimeout($(this).data('mouseTimer'))
$('.loginBar').stop(true, true).animate({
marginTop: '0px'
}, 150);
$('#loggedIn').stop(true, true).animate({
marginTop: '20px'
}, 150);
}).mouseleave(function () {
var timer = setTimeout(function () {
$('.loginBar').stop(true, true).animate({
marginTop: '-50px'
}, 150);
$('#loggedIn').stop(true, true).animate({
marginTop: '-30px'
}, 150);
}, 1200);
$(this).data('mouseTimer', timer);
});
Related
Hi Im new to JQuery and Statements and I can't seem to get my code to work I'm pretty sure its something minor that is the error but I cant see to find what the problem is exactly here is my code
$(window).scroll(function () {
if ($(this).scrollTop() >= 400) {
$('.BOX').animate({
marginLeft: 500,
marginRight: 0,
display: 'toggle'
}, 5000);
} else if ($(this).scrollTop() < 400) {
$('.BOX').animate({
marginLeft: 0,
marginRight: 0,
display: 'toggle'
}, 5000);
}
});
Thanks in advance if you can point me in the right direction.
http://jsfiddle.net/b6KuE/86/ - Scrolltop >400 plays animations what I am trying to do is Reverse the animation when its less than 400 back to 0 left.
As mentioned in the comments, the scroll event handler gets called over and over as the window is scrolled, so the animation gets started over and over. Those animations queue up, so by the time you scroll far enough for it to animate in the other direction, it is going to be a long time before you see it animate that way, and it may never because of an overflow.
You need to stop the animation before restarting it:
$(window).scroll(function () {
if ($(this).scrollTop() >= 400) {
$('.BOX').stop().animate({
marginLeft: 500,
marginRight: 0,
display: 'toggle'
}, 5000);
} else if ($(this).scrollTop() < 400) {
$('.BOX').stop().animate({
marginLeft: 0,
marginRight: 0,
display: 'toggle'
}, 5000);
}
});
jsfiddle
What exactly is $(this) referring to?
Try this instead:
$(window).scroll(function () {
if ($(window).scrollTop() >= 400) {
$('.BOX').animate({
marginLeft: 500,
marginRight: 0,
display: 'toggle'
}, 5000);
} else if ($(window).scrollTop() < 400) {
$('.BOX').animate({
marginLeft: 0,
marginRight: 0,
display: 'toggle'
}, 5000);
}
});
Also, you have quite a negative response on this question already. Try and help us to help you. If you say you're getting an error, it might help to say exactly what that error is. Other wise, we're just second guessing.
I'm using the animate function in jQuery to re-size a content area when the user hovers over the element.
The script works fine but I cant work out how to stop the script from resizing more than once if the element is hovered over more than once.
I have created a jsfiddle here I have also added the js I used.
var minheight = $('.section-fade').css("height");
$('.section-fade').hover(
function () {
$(this).animate({
height: $('.childsection').height()
}, 1000);
},
function () {
$(this).animate({
height: minheight
}, 1000);
});
Any ideas would be very much welcomed.
Cheers
What you're looking for is .stop().
.stop() will cancel all animations on an object.
http://jsfiddle.net/zxm9S/1/
var minheight = $('.section-fade').css("height");
$('.section-fade').hover(
function () {
$(this).stop().animate({
height: $('.childsection').height()
}, 1000);
},
function () {
$(this).stop().animate({
height: minheight
}, 1000);
});
Im trying to get a div move up and down from its current position during a mouse hover event - I have the followng but it only works once and then stops as opposed to continually cycling?
tiptitle.stop(true, true).animate({
'top': '5px'
}, 100).stop(true, true).animate({
'top': '0px'
}, 100);
make an infinite loop
function animate(isOpen) {
tiptitle.stop().animate({'top': isOpen ? '5px' : '0px'}, 100, function() { animate(!isOpen); })
}
I've created a hover effect for my website navigation. http://www.preview.brencecoghill.com/
I have got the effect to work as desired for all aspects accept one - I can't get the orange square to stay down for the currently selected page
for example if I click on "Contact", I am navigated to that page and initially the orange block stays down behind the contact link - however, if I hover over the "contact" link again it causes the block to hide itself again.
How can I make this effect sticky for the current page that I am on? I'm fairly new to javascript - so I'm sure this is something fairly straight forwards - but I can't figure out how to make this work.
The website is based in Wordpress, and is outputting a class ".current_page_item" on the menu - so I am sure that this could be used to identify the menu item and stop the javascript firing if this item is hovered over?
I based the technique on the details available here:
http://line25.com/tutorials/how-to-create-a-cool-animated-menu-with-jquery
I've pasted the javascript I have used on my website here to help you see what I'm doing:
jQuery(document).ready(function () {
jQuery("#main-nav > li > a").addClass("js");
jQuery("#main-nav > li > a").hover(
function () {
jQuery(this).stop(true, true).animate({ backgroundPosition: "(0 -20)" }, 200);
jQuery(this).animate({ backgroundPosition: "(0 -5px)" }, 150);
},
function () {
jQuery(this).animate({ backgroundPosition: "(0 -100px)" }, 200);
}
);
});
exclude current-menu-item class from selector:
jQuery(document).ready(function () {
var nav=jQuery("#main-nav > li:not(.current-menu-item) > a");
nav.addClass("js");
nav.hover(
function () {
jQuery(this).stop(true, true).animate({ backgroundPosition: "(0 -20)" }, 200);
jQuery(this).animate({ backgroundPosition: "(0 -5px)" }, 150);
},
function () {
jQuery(this).animate({ backgroundPosition: "(0 -100px)" }, 200);
}
);
});
I try to show and hide element on hover element. My code works, but when user mouseover and mouseout element very fast, animation run and run even mouseout it :(
$('.EventNameList').hover(
function() {
$(this).stop().animate({ backgroundColor: '#eaeaea' }, 200, "easeInQuad");
$(this).find('div#TrainingActionButtons').show("fast");
},
function() {
$(this).stop().animate({ backgroundColor: '#ffffff' }, 800, "easeOutQuad");
$(this).find('div#TrainingActionButtons').hide("fast");
});
});
And HTML:
<tr>
<td class="EventNameList">
<div id="TrainingActionButtons">
Some text
</div>
</td>
</tr>
I don't know about the performance on this but you could tell all elements to stop and go to end, as opposed to only the current element.
$('.EventNameList').hover(
function() {
// stop([clearqueue], [jumpToEnd])
$('.EventNameList').stop(true, true);
$(this).animate({ backgroundColor: '#eaeaea' }, 200, "easeInQuad");
$(this).find('div#TrainingActionButtons').show("fast");
},
function() {
$(this).stop().animate({ backgroundColor: '#ffffff' }, 800, "easeOutQuad");
$(this).find('div#TrainingActionButtons').hide("fast");
});
});
You could try to call stop(true,true) - this will clear the effect queue and skip to the end of currently running animation. Read more about it here