Solved

hover delay on toggleclass with jquery?

Posted on 2012-03-18
8
1,680 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

757 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

23 Experts available now in Live!

Get 1:1 Help Now