CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)
-   -   Is this code wrong? (http://www.codingforums.com/showthread.php?t=287747)

Haidar 02-16-2013 05:09 PM
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);                                               
                    });
            }
            );
});

rnd me 02-16-2013 08:46 PM
.hover() is deprecated...

VIPStephan 02-16-2013 08:58 PM
Quote:
Originally Posted by rnd me (Post 1313794)
.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.

rnd me 02-16-2013 09:55 PM
Quote:
Originally Posted by VIPStephan (Post 1313796)
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

Haidar 02-17-2013 12:26 AM
Im using 1.9.1 i think its the newest? So what should i change hover too :o

Old Pedant 02-17-2013 05:18 AM
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?

Haidar 02-17-2013 12:33 PM
Quote:
Originally Posted by Old Pedant (Post 1313868)
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?

VIPStephan 02-17-2013 09:22 PM
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.

Haidar 02-17-2013 09:47 PM
Quote:
Originally Posted by VIPStephan (Post 1313973)
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);                                               
                    });
            }
            );
});

VIPStephan 02-18-2013 11:39 AM
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);                                               
                    });
            });

Haidar 02-18-2013 07:49 PM
Thanks i love you!


All times are GMT +1. The time now is 06:13 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.