?
Solved

hover delay on toggleclass with jquery?

Posted on 2012-03-18
8
Medium Priority
?
1,808 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 2000 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

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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…
Suggested Courses

771 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