Solved

hover delay on toggleclass with jquery?

Posted on 2012-03-18
8
1,708 Views
Last Modified: 2012-04-03
can someone please go to this site and tell me why there is a slight delay the first time you hover over one of the top links? notice it turns black then purple, then after thatm the function toggles normally.

I am useing this:

$('#minus .header .links .link').live('hover', function () {
	
		if($(this).hasClass('linkCold'))
			{
				$(this).addClass('linkHover').removeClass('linkCold');
			}
			else if($(this).not('.linkHover'))
			{
				$(this).addClass('linkCold').removeClass('linkHover');
			}
			
	});

Thanks

Judson.
0
Comment
Question by:judsonmusic
  • 3
  • 3
8 Comments
 
LVL 14

Expert Comment

by:nishant joshi
ID: 37736271
you can directly use delay function...

$('#minus .header .links .link').live('hover', function () { 
      
            if($(this).hasClass('linkCold'))
                  {
                        $(this).addClass('linkHover').delay(1000).removeClass('linkCold');
                  }
                  else if($(this).not('.linkHover'))
                  {
                        $(this).addClass('linkCold').delay(1000).removeClass('linkHover');
                  }
                  
      });

Open in new window

0
 
LVL 3

Author Comment

by:judsonmusic
ID: 37737280
Did you read my question? Also here is a link to view th problem,

http://prestigesalonproducts-com.securec32.ezhostingserver.com/index.cfm
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 37791020
I just tested that link using Chromium and there was no delay at all. Have you fixed the problem? Also works perfect with no delay in Firefox. Addclass and removeClass should work instantly with no delay especially if you have not added a delay to it. My guess is the initial problem you were/are having is due to the browser you are using and the speed of your connection. It may have taken a little but of time to download the rollover image perhaps. In any case, it is working fine with the two browsers I mentioned.
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 3

Author Comment

by:judsonmusic
ID: 37796903
on this link :http://prestigesalonproducts.com/

The first time you hover over one of the links you will see a very slight "black out" ot 100ms delay, after that the hovering works instantly on all of the other ones.

Judson
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 37798669
Yes I see it now and I stand by my thoughts earlier. This looks to me like an image loading delay. It is not a coding issue or it would do it all the time. I just dumped my cache and reloaded that page and it had the same delay. It is a typical delay of the browser doing what you have asked.

1: read some code on the "hover" or "mouseover" event
2: Go to the folder containg the new "background" image and load the new image

Although most CPU's are so fast and we can't see what they are doing, if you don't have a lightning quick connection it will have a slight delay which is what you/we are seeing. It doesn't matter if you (yourself) has a super fast internet connection, what matters is how fast the "server's" connection is. If this is on a shared server it will be dealing with traffic as well so there are a lot of issues to take into account when tracking how fast a page is served up to ones browser.
What I think you should try is to preload those images. Make a small function that loads the background image as it's first priority. I would load it into a hidden div. Run that function on page load ie: <body onload="loadImages()"> so it will already be in your cache by the time the page is fully loaded and there will be no more delay when you hover over the links.
0
 
LVL 3

Author Comment

by:judsonmusic
ID: 37799192
So would you just do like $('#hiddendiv').html('<img src="my image"><img src="myimage2">');

Like that?

I havent used preloading of images since macro media used to do it for me in JavaScript lol.

Thanks

Judson
0
 
LVL 20

Accepted Solution

by:
Mark Brady earned 500 total points
ID: 37801074
Yes something like that. Just make a div like you have suggested and load into it all the background images and make that the very first thing that happens so the images will be sitting in the users cache by the time the page is loaded. It should remove the flicker or slight delay we are seeing.
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now