Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jan 2010
    Posts
    105
    Thanks
    18
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    .hover() is deprecated...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    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.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    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 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    Regular Coder
    Join Date
    Jan 2010
    Posts
    105
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Im using 1.9.1 i think its the newest? So what should i change hover too

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,542
    Thanks
    77
    Thanked 4,382 Times in 4,347 Posts
    Ummm...did you *READ* the page that RndMe linked to?
    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.

  • #7
    Regular Coder
    Join Date
    Jan 2010
    Posts
    105
    Thanks
    18
    Thanked 0 Times in 0 Posts
    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?

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    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.

  • #9
    Regular Coder
    Join Date
    Jan 2010
    Posts
    105
    Thanks
    18
    Thanked 0 Times in 0 Posts
    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);						 
        		});
        	}
        	);
    });

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    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);						 
        		});
        	});

  • #11
    Regular Coder
    Join Date
    Jan 2010
    Posts
    105
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Thanks i love you!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •