some issues with mouseenter and mouseleave functions - javascript

I have this function:
$(".insidediv").hide();
$(".floater").mouseenter(function(){
$(".hideimg").fadeOut(function(){
$(".insidediv").fadeIn();
});
});
$(".floater").mouseleave(function(){
$(".insidediv").fadeOut(function(){
$(".hideimg").fadeIn();
});
});
the function built to make a little animation, when you 'mouseenter' the div the picture I have there is hidden and than a few text show up.
it works fine if i move the mouse slowly. but if i move my mouse fast over the div the function getting confused or something and it shows me both '.insidediv and .hideimg,
how can i fixed that little problem so it wont show me both? thanks!

You need to reset the opacity, because fadeIn and fadeOut uses this css property for animation. Just stopping the animation is not enough.
This should work:
var inside = $(".insidediv"),
img = $(".hideimg");
duration = 500;
inside.hide();
$(".floater").mouseenter(function () {
if (inside.is(":visible"))
inside.stop().animate({ opacity: 1 }, duration);
img.stop().fadeOut(duration, function () {
inside.fadeIn(duration);
});
});
$(".floater").mouseleave(function () {
if (img.is(":visible"))
img.stop().animate({ opacity: 1 }, duration);
inside.stop().fadeOut(duration, function () {
img.fadeIn(duration);
});
});
I just introduced the duration variable to get animations of equal length.
Here is a working fiddle: http://jsfiddle.net/eau7M/1/ (modification from previous comment on other post)

try this:
var $insideDiv = $(".insidediv");
var $hideImg = $(".hideimg");
$insideDiv.hide();
$(".floater").mouseenter(function(){
$hideImg.finish().fadeOut(function(){
$insideDiv.fadeIn();
});
}).mouseleave(function(){
$insideDiv.finish().fadeOut(function(){
$hideImg.fadeIn();
});
});

This will solve your issue:
var inside = $(".insidediv"),
img = $(".hideimg");
inside.hide();
$(".floater").hover(function () {
img.stop(true).fadeOut('fast',function () {
inside.stop(true).fadeIn('fast');
});
},function () {
inside.stop(true).fadeOut('fast',function () {
img.stop(true).fadeIn('fast');
});
});
Updated Fiddle

You need to set the 'mouseleave' function when the mouse is still inside the
'floater' div.
Try this (i have tried it on the jsfiddle you setup and it works):
.....
<div class="floater">Float</div>
<div class="insidediv">inside</div>
<div class="hideimg">img</div>
var inside = $('.insidediv'),
img = $('.hideimg');
inside.hide();
$('.floater').mouseenter( function() {
img.stop().hide();
inside.show( function() {
$('.floater').mouseleave( function() {
inside.hide();
img.fadeIn();
inside.stop(); // inside doesn't show when you hover the div many times fast
});
});
});
.....

Related

Jquery thumbnail gallery changing all images

I've tried to create a jQuery effect using fancy box to contain my content and within that is a large image with thumbnails below. What I was trying to make happen was when the thumbnails are clicked then the large image updates (see RACE Twelve image as an example). This works fine but the problem is when I go to another fancy box on my website (SEE RACE ONE box) then that image has been updated to be whatever thumbnail was clicked last.
I thought this might be event bubbling but preventing default hasn't helped.
I'm very new to jQuery and know that this is something stupid that I'm doing.
Any advice would be greatly appreciated? Thank you :)
Live version of page: http://www.goodwood.co.uk/members-meeting/the-races.aspx
jsfiddle for jQuery: http://jsfiddle.net/greenhulk01/JXqzL/
(function ($) {
$(document).ready(function () {
$('.races-thumbnail').live("click", function (e) {
$('.races-main-image').hide();
$('.races-image-wrap').css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
$('.races-main-image').attr('src', i.attr('src'));
$('.races-image-wrap').css('background-image', 'none');
$('.races-main-image').fadeIn();
});
return false;
e.preventDefault();
});
$(".races-image-wrap img").toggle(function () { //fired the first time
$(".races-pop-info").show();
$(this).animate({
width: "259px",
height: "349px"
});
}, function () { // fired the second time
$(".races-pop-info").hide();
$('.races-main-image').animate({
width: "720px",
height: "970px"
});
});
$('#fancybox-overlay, #fancybox-close').live("click", function () {
$(".races-pop-info").show();
$(".races-main-image").animate({
width: "259px",
height: "349px"
});
});
});
})(jQuery);
$('.races-main-image') will select all elements with that class, even the ones which aren't currently visible.
You can select the closest '.races-main-image' to the clicked element as per the code below (when placed inside the click event handler)
$('.races-main-image', $(e.target).closest('.races-fancy-box'))
So your new code should look like:
$('.races-thumbnail').live("click", function (e) {
var racesmainimage = $('.races-main-image', $(e.target).closest('.races-fancy-box'));
var racesimagewrap = $('.races-image-wrap', $(e.target).closest('.races-fancy-box'));
racesmainimage.hide();
racesimagewrap.css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
racesmainimage.attr('src', i.attr('src'));
racesimagewrap.css('background-image', 'none');
racesmainimage.fadeIn();
});
return false;
});
I've also removed your 'e.preventDefault();' return false; includes that, and was preventing e.preventDefault() from being executed in any case.

Delay jQuery fadeIn due to unwanted behavior

How do I make my .right-menu DIV to fadein only after a couple of moments the mouse is hovering its parent .right-menu-background ? The thing is that when you move the cursor quickly in and out, .right-menu DIV is reappearing a lot of times after.
How do I delay animation for few ms?
Here's the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").fadeIn();
}
,function(){
$(this).find(".right-menu").fadeOut();
}
);
});
a easy fix is to use .stop()
$(function () {
$(".right-menu-background").hover(function () {
$(this).find(".right-menu").stop(true, true).fadeIn();
}, function () {
$(this).find(".right-menu").stop(true, true).fadeOut();
});
});
using timer
$(function () {
$(".right-menu-background").hover(function () {
var el = $(this).find(".right-menu");
var timer = setTimeout(function(){
el.stop(true, true).fadeIn();
}, 500);
el.data('hovertimer', timer);
}, function () {
var el = $(this).find(".right-menu");
clearTimeout(el.data('hovertimer'))
el.stop(true, true).fadeOut();
});
});
Use the stop() function in front of fading calls ...stop(true, true)
With those two parameters set to true, the animation queue is cleared and the last animation is played this will get ride of the weird effect
$(this).find(".right-menu").stop(true, true).fadeIn();
Use .delay() function.
Here is the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").delay(800).fadeIn(400);
},function(){
$(this).find(".right-menu").fadeOut(400);
});
});
Check the demo here: http://jsfiddle.net/Mju7X/

Auto hide element by jquery - code not work

I have an element in aspx page with class= "._aHide" it carrying a message, And it is shown repeatedly.
<div id="Message1" class="._aHide" runat="server" visible="true"><p>My Message</p></div>
aspx server side elements not created when page load if it's visible property = true.
I need to hide this div after 7 seconds of show it, unless mouse over.
I created this code
$(document).ready(function () {
var hide = false;
$("._aHide").hover(function () {
clearTimeout(hide);
});
$("._aHide").mouseout(function () {
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
hide;
});
$("._aHide").ready(function () {
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
hide;
});
});
But somthings wrong here
1- this code work for one time only, And I show this message many times.
2- All message boxes hides in one time, because I can't use $(this) in settimeout and I don't know why.
Thank you for your help, and I really appreciate it
Remove the point in the HTML code:
<div id="Message1" class="_aHide" runat="server" visible="true"><p>My Message</p></div>
See: http://api.jquery.com/class-selector/
tbraun89 is right, remove the "." in your html code.
Then, you can simplify your code like this :
JQuery hover have 2 functions using mouseenter and mouseleave
$(document).ready(function () {
var hide = false;
$("._aHide").hover(
function () {
//Cancel fadeout
clearTimeout(hide);
},
function(){
//re-set up fadeout
clearTimeout(hide);
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
});
//Set up fadeout
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
});

jquery fadeIn (on)click each element in succession

I am trying to fade each element in a div to fadeIn (in) succession. I know how to fade in the whole block but not each individual div.
http://jsfiddle.net/reggi/Km55n/
$('#button').click(function() {
setTimeout(function() {
$('#divWithDivs').fadeIn(500);
}, 300);
});
You need to fade the next div in the completion callback of the previous one.
For example:
function fadeAll(elems) {
elems.filter(':hidden:first').fadeIn(1000, function() { fadeAll(elems); });
}
fadeAll($('#parent div'));
Demo
Note that you'll need to hide the children, not the parent.
You could do something like this:
$('#button').click(function() {
var show_next = function(elem) {
if (elem.length) {
elem.fadeIn(300, function () {
show_next(elem.next());
});
}
};
show_next($('div#divWithDivs').children().first());
});
$('#divWithDivs').children().first().fadeIn(500, function() {
$(this).next().fadeIn(500, arguments.callee);
});
Here the demo based on your: http://jsfiddle.net/Km55n/2/

How can I check if the cursor is hovering on an element using JQuery

It possible to check if the cursor is hovering on an element.
Something like
$("#divId").is("hover");
NOTE: I just want to check not set event.
.is(':hover');
or
$('#divId:hover');
Updated answer!
$("#foo").hover(function() {
$(this).data("hovered", true);
}, function() {
$(this).data("hovered", false);
});
Testing if it is hovered...
if ( $("#foo").data("hovered") ) {
// it is hovered
} else {
// it's not hovered
}
You can use jQuery's hover(), mouseenter() or mouseover()
$("#divId").hover(function() { alert("hovering"; });
This will fire on mouseenter and mouseleave. You can add separate event handlers for each.
So if you want to do something like, if hovering over #divId increase x by one, and when you stop hovering decrease y by one:
$("#divId").hover(function() { ++x; },
function() { --y; });
If you really want an if hovering:
var hovering = 0;
$("#divId").hover(function() { hovering = 1; },
function() { hovering = 0; });
...
// Then inside somewhere useful. Maybe in a setInterval, or triggered by
// another action...
if (hovering) { ...
Try it out with this jsFiddle
For example:
$(function() {
var hovering = 0;
$("div").hover(function() { hovering = 1; },
function() { hovering = 0; });
$(document).keyup(function() {
if (hovering) alert("hovering!"); // This is the "if hovering"
else alert("not hovering.");
});
});
You can use .hover(). It's can be used like so:
$("selector").hover(
function (){
//mouse over
},
function (){
//mouse out
}
);
An example of it's use from the documentation is here:
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
Depending on what you are doing either mouseover() (http://api.jquery.com/mouseover/) or hover() (http://api.jquery.com/hover/) can be useful.

Categories

Resources