- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Fading Hover Rollover
Just implemented this code into my site:
https://css-tricks.com/color-fading-menu-with-jquery/
I was wondering if anyone could tell me where the timing for the background color of the hover is? I can change the milliseconds of the actual TEXT changing (in the main.js file) , but this doesn’t seem to affect the background color timing. I just want the entire transition to be faster.
thanks
I have highlighted the background fading speeds in Red. Remember, when switching from a text speed (i.e ‘slow’ or ‘fast’) to milliseconds, you no longer use quotation marks.
var hoverColour = "#FFF";
//when the dom has loaded
$(function(){
//display the hover div
$("div.hoverBtn").show("fast", function() {
//append the background div
$(this).append("<div></div>");
//on link hover
$(this).children("a").hover(function(){
//store initial link colour
if ($(this).attr("rel") == "") {
$(this).attr("rel", $(this).css("color"));
}
//fade in the background
$(this).parent().children("div")
.stop()
.css({"display": "none", "opacity": "1"})
.fadeIn("fast");
//fade the colour
$(this) .stop()
.css({"color": $(this).attr("rel")})
.animate({"color": hoverColour}, 350);
},function(){
//fade out the background
$(this).parent().children("div")
.stop()
.fadeOut("slow");
//fade the colour
$(this) .stop()
.animate({"color": $(this).attr("rel")}, 250);
});
});
});
Also, sorry for having not having it in code, I can’t change the text color with the code tag on it as well. They should fix that.