jQuery setTimeout for hover links?
I am having a tabbed script which has switch tabs on hover. Since links are close together, i want to have a delay before hover function is fired, so content is not switched so fast while user "touches" the rest of the links.
maybe with setTmeout? Here is my script, how do i do that?
$(".HotelPanel_content").hide(); //Hide all content
$("ul.HotelPanelNav li:first").addClass("active").show(); //Activate first tab
$(".HotelPanel_content:first").show(); //Show first tab content
$("ul.HotelPanelNav li").hover(function() {
$("ul.HotelPanelNav li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".HotelPanel_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("id"); //Find the rel attribute value to identify the active tab + content
$(active开发者_运维问答Tab).slideDown("slow"); //Fade in the active content
return false;
});
});
Try this:
var thisCache;
var hoverTimeout;
$("ul.HotelPanelNav li").mouseenter(function() {
thisCache = $(this);
hoverTimeout = setTimeout(function(){
$("ul.HotelPanelNav li").removeClass("active"); //Remove any "active" class
thisCache.addClass("active"); //Add "active" class to selected tab
$(".HotelPanel_content").hide(); //Hide all tab content
var activeTab = thisCache.find("a").attr("id"); //Find the rel attribute value to identify the active tab + content
$(activeTab).slideDown("slow"); //Fade in the active content
},300)
});
$("ul.HotelPanelNav li").mouseleave(function(){
clearTimeout(hoverTimeout)
})
maybe you can do it this way
$("ul.HotelPanelNav li").hover(function() {
settTimeout('yourfunction($this);', time)
});
function yourfunction(element){
$("ul.HotelPanelNav li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".HotelPanel_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("id"); //Find the rel attribute value to identify the active tab + content
$(activeTab).slideDown("slow"); //Fade in the active content
return false;
}
You can add .delay() to any jquery animation method. This method takes a time in miliseconds so you could do this on the animation.
$(activeTab).delay(5000).slideDown("slow");
I believe you could also delay the function
$("ul.HotelPanelNav li").delay(5000).hover(function() {
Edit
You can also use the .timeout function
window.setTimeout(function() {
callYourFunction();
}, 1000);
Edit 2
This work fine for me
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#somelink").hover(function(){
window.setTimeout(function() {
//put your code here
}, 1000);
});
});
</script>
</head>
<body>
<div id="flash">
</div>
<div id="somelink">
Hello this is a div
</div>
加载中,请稍侯......
精彩评论