Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-16-2013, 05:09 PM   PM User | #1
Haidar
Regular Coder

 
Join Date: Jan 2010
Posts: 105
Thanks: 18
Thanked 0 Times in 0 Posts
Haidar has a little shameless behaviour in the past
Is this code wrong?

Sorry im bit new to js but when i move my mouse over this div very fast many times it will at some point hit a bug so the hover image stays, or the tag that should fade out stays as it is. Somebody know if there is kind of wrong details in this code? Because i want it to work like when we use image and then put image:hover at CSS they never get bugs.

Code:
	$(function(){
		$('#tag-hover').hover(
    	function(){
    		$('div.tag-font').stop(true, true).fadeOut(100, function(){
    			$('div.tag-image').stop(true, true).fadeIn(400);						 
    		});
    	},
    	function(){
    		$('div.tag-image').fadeOut(400, function(){
    			$('div.tag-font').fadeIn(100);						 
    		});
    	}
    	);
});

Last edited by Haidar; 02-16-2013 at 05:25 PM..
Haidar is offline   Reply With Quote
Old 02-16-2013, 08:46 PM   PM User | #2
rnd me
Senior Coder

 
rnd me's Avatar
 
Join Date: Jun 2007
Location: Urbana
Posts: 3,452
Thanks: 9
Thanked 466 Times in 450 Posts
rnd me is a jewel in the roughrnd me is a jewel in the roughrnd me is a jewel in the rough
.hover() is deprecated...
__________________
my site (updated 5/13)
STATS (2013/5) HTML5:90.2% MOB:14% IE7:0.5% IE8:8.8% IE9:11.4% IE10:6.5%
rnd me is offline   Reply With Quote
Old 02-16-2013, 08:58 PM   PM User | #3
VIPStephan
The fat guy next door


 
VIPStephan's Avatar
 
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,584
Thanks: 5
Thanked 864 Times in 841 Posts
VIPStephan is a jewel in the roughVIPStephan is a jewel in the roughVIPStephan is a jewel in the rough
Quote:
Originally Posted by rnd me View Post
.hover() is deprecated...
Is that so? At first it depends on the version of jQuery used (which we don’t know from the original post). And secondly, it doesn’t say anything about that in the documentation.
__________________
Don’t click this link!
VIPStephan is offline   Reply With Quote
Old 02-16-2013, 09:55 PM   PM User | #4
rnd me
Senior Coder

 
rnd me's Avatar
 
Join Date: Jun 2007
Location: Urbana
Posts: 3,452
Thanks: 9
Thanked 466 Times in 450 Posts
rnd me is a jewel in the roughrnd me is a jewel in the roughrnd me is a jewel in the rough
Quote:
Originally Posted by VIPStephan View Post
Is that so? At first it depends on the version of jQuery used (which we don’t know from the original post). And secondly, it doesn’t say anything about that in the documentation.

http://jquery.com/upgrade-guide/1.9/#hover-pseudo-event
__________________
my site (updated 5/13)
STATS (2013/5) HTML5:90.2% MOB:14% IE7:0.5% IE8:8.8% IE9:11.4% IE10:6.5%
rnd me is offline   Reply With Quote
Old 02-17-2013, 12:26 AM   PM User | #5
Haidar
Regular Coder

 
Join Date: Jan 2010
Posts: 105
Thanks: 18
Thanked 0 Times in 0 Posts
Haidar has a little shameless behaviour in the past
Im using 1.9.1 i think its the newest? So what should i change hover too
Haidar is offline   Reply With Quote
Old 02-17-2013, 05:18 AM   PM User | #6
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,168
Thanks: 59
Thanked 3,992 Times in 3,961 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
Ummm...did you *READ* the page that RndMe linked to?
Quote:
As of 1.9, the event name string "hover" is no longer supported as a synonym for "mouseenter mouseleave". This allows applications to attach and trigger a custom "hover" event. Changing existing code is a simple find/replace, and the "hover" pseudo-event is also supported in the jQuery Migrate plugin to simplify migration.
So either do the replace of use that plugin. No?
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Old Pedant is offline   Reply With Quote
Old 02-17-2013, 12:33 PM   PM User | #7
Haidar
Regular Coder

 
Join Date: Jan 2010
Posts: 105
Thanks: 18
Thanked 0 Times in 0 Posts
Haidar has a little shameless behaviour in the past
Quote:
Originally Posted by Old Pedant View Post
Ummm...did you *READ* the page that RndMe linked to?

So either do the replace of use that plugin. No?
Yeah i read it thats why i asked about what should i change the Hover tag into? Becuase it sayed that its not for use anymore. Sorry but im really stupid on this, which word should i have replace the hover with :P?
Haidar is offline   Reply With Quote
Old 02-17-2013, 09:22 PM   PM User | #8
VIPStephan
The fat guy next door


 
VIPStephan's Avatar
 
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,584
Thanks: 5
Thanked 864 Times in 841 Posts
VIPStephan is a jewel in the roughVIPStephan is a jewel in the roughVIPStephan is a jewel in the rough
Well, as it mentioned and as the documentation for hover() says that function is/was a shortcut for mouseenter() and mouseleave(), so that’s what you should use instead.

I still wonder why they didn’t mention the deprecation of hover() in the documentation.
__________________
Don’t click this link!
VIPStephan is offline   Reply With Quote
Old 02-17-2013, 09:47 PM   PM User | #9
Haidar
Regular Coder

 
Join Date: Jan 2010
Posts: 105
Thanks: 18
Thanked 0 Times in 0 Posts
Haidar has a little shameless behaviour in the past
Quote:
Originally Posted by VIPStephan View Post
Well, as it mentioned and as the documentation for hover() says that function is/was a shortcut for mouseenter() and mouseleave(), so that’s what you should use instead.

I still wonder why they didn’t mention the deprecation of hover() in the documentation.
Like this or :P?

Code:
	$(function(){
		$('#tag-hover').mouseenter()(
    	function(){
    		$('div.tag-font').stop(true, true).fadeOut(100, function(){
    			$('div.tag-image').stop(true, true).fadeIn(400);						 
    		});
    	},
    	function(){
		$('#tag-hover').mouseleave()(
    		$('div.tag-image').fadeOut(400, function(){
    			$('div.tag-font').fadeIn(100);						 
    		});
    	}
    	);
});
Haidar is offline   Reply With Quote
Old 02-18-2013, 11:39 AM   PM User | #10
VIPStephan
The fat guy next door


 
VIPStephan's Avatar
 
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,584
Thanks: 5
Thanked 864 Times in 841 Posts
VIPStephan is a jewel in the roughVIPStephan is a jewel in the roughVIPStephan is a jewel in the rough
Almost.
The basic syntax looks like this:
Code:
$('#tag-hover').mouseenter(mouseInFunction).mouseleave(mouseOutFunction);
And your code specifically would look like this then:
Code:
$('#tag-hover')
	.mouseenter(
		function(){
    			$('div.tag-font').stop(true, true).fadeOut(100, function(){
    				$('div.tag-image').stop(true, true).fadeIn(400);
    			});
    		}
	)
	.mouseleave(
		function() {
    			$('div.tag-image').fadeOut(400, function(){
    				$('div.tag-font').fadeIn(100);						 
    			});
    		}
    	);
This is a very verbose way of writing it, it could as well look like this:
Code:
$('#tag-hover')
	.mouseenter(function(){
    		$('div.tag-font').stop(true, true).fadeOut(100, function(){
    			$('div.tag-image').stop(true, true).fadeIn(400);
    		});
    	})
	.mouseleave(function() {
    		$('div.tag-image').fadeOut(400, function(){
    			$('div.tag-font').fadeIn(100);						 
    		});
    	});
__________________
Don’t click this link!
VIPStephan is offline   Reply With Quote
Old 02-18-2013, 07:49 PM   PM User | #11
Haidar
Regular Coder

 
Join Date: Jan 2010
Posts: 105
Thanks: 18
Thanked 0 Times in 0 Posts
Haidar has a little shameless behaviour in the past
Thanks i love you!
Haidar is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 09:14 AM.


Advertisement
Log in to turn off these ads.