悬停链接的 jQuery setTimeout？

发布于 2024-11-15 11:10:30 字数 808 浏览 2 评论 0原文

我有一个选项卡式脚本，它在悬停时切换选项卡。由于链接靠得很近，我希望在触发悬停功能之前有一个延迟，因此当用户“触摸”其余链接时内容不会切换得那么快。

也许与 setTmeout 一起？这是我的脚本，我该怎么做？

$(".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
    $(activeTab).slideDown("slow"); //Fade in the active content
    return false;
});

});

原文

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
    $(activeTab).slideDown("slow"); //Fade in the active content
    return false;
});

});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白芷 2024-11-22 11:10:30

试试这个：

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)
})

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)
})

回复收藏 0 原文

薔薇婲 2024-11-22 11:10:30

也许你可以这样做

$("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;
}

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;
}

回复收藏 0 原文

心不设防 2024-11-22 11:10:30

您可以将 .delay() 添加到任何 jquery 动画方法。此方法需要以毫秒为单位的时间，因此您可以在动画上执行此操作。

$(activeTab).delay(5000).slideDown("slow");

我相信你也可以延迟函数

$("ul.HotelPanelNav li").delay(5000).hover(function() {

Edit

你也可以使用 .timeout 函数

window.setTimeout(function() {
    callYourFunction();
}, 1000);

Edit 2

这对我来说很好用

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

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>

回复收藏 0 原文

~没有更多了~