Solved

hover delay on toggleclass with jquery?

Posted on 2012-03-18
8
1,719 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Json Schema 8 32
Javascript 2 19
GET error with Font Awesome 3 12
message Alert on an empty search 10 17
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

790 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