Question

我正在完成一个基本上是加强商业广告的网站，但我遇到了一系列li链接的问题，我试图在mouseenter上向左滑动。

问题基本上是，mouseenter功能太敏感了。我查看了HoverIntent插件，但我知道它不支持mouseenter，因为当插件编写时，mouseenter不是受支持的jQuery函数。所以我决定使用SetTimeout功能但我似乎无法让它正常工作。

这是jQuery的一部分我试图用以下方法实现SetTimeout函数：

$(document).ready(function() {
    $('.home').mouseenter(function(){
        $('.home').stop().animate({left:'55%'}, 1000)
        $('#icon_home:hidden').delay(600).fadeIn(600);
    }).mouseleave(function(){
        $('.home').stop().animate({left:'50%'}, 1000)
        $('#icon_home').hide();

    $('.about').mouseenter(function(){
        $('.about').stop().animate({left:'55%'}, 1000)
        $('#icon_about:hidden').delay(200).fadeIn(600);
    }).mouseleave(function(){
        $('.about').stop().animate({left:'50%'}, 1000)
        $('#icon_about').hide();

    $('.contact').mouseenter(function(){
        $('.contact').stop().animate({left:'55%'}, 1000)
        $('#icon_contact:hidden').delay(200).fadeIn(600);
    }).mouseleave(function(){
        $('.contact').stop().animate({left:'50%'}, 1000)
        $('#icon_contact').hide();

    $('.services').mouseenter(function(){
        $('.services').stop().animate({left:'55%'}, 1000)
        $('#icon_services:hidden').delay(200).fadeIn(600);
    }).mouseleave(function(){
        $('.services').stop().animate({left:'50%'}, 1000)
        $('#icon_services').hide();
    });
    });
    });
    });

//Hidden icons
    $('#icon_home').hide();
    $('#icon_about').hide();
    $('#icon_contact').hide();
    $('#icon_services').hide(); 
});

HTML：

<div id="icon_home"><img src="Icons/home.png" width="60" height="60" /></div>
<div id="icon_about"><img src="Icons/about.png" width="60" height="60" /></div>
<div id="icon_contact"><img src="Icons/contact.png" width="60" height="60" /></div>
<div id="icon_services"><img src="Icons/services.png" width="60" height="60" /></div> 
<div id="thumb">
      <ul>
        <li class="home"><a rel="images/gallery/thumb/home.png" src="images/gallery/home.png" a href=" http://gmdcpa.com">
                         <img src="images/gallery/thumb/home.png" border="0" alt="" /></a></li>
        <li class="about"><a rel="images/gallery/thumb/about us.png" src="images/gallery/about us.png" a href="http://gmdcpa.com">
                          <img src="images/gallery/thumb/about us.png" border="0" alt="" /></a></li>
        <li class="contact"><a rel="images/gallery/thumb/Contact Us.png" src="images/gallery/Contact Us.png" a href="http://gmdcpa.com">
                            <img src="images/gallery/thumb/Contact Us.png" border="0" alt="" /></a></li>
        <li class="services"><a rel="images/gallery/thumb/Services.png" src="images/gallery/Services.png" a href="http://gmdcpa.com">
                             <img src="images/gallery/thumb/Services.png" border="0" alt="" /></a></li>
      </ul>
</div>

我的问题是，我应该将这些功能合并到一个功能中吗？如果是这样，我该怎么做呢？我应该怎样做才能实现SetTimeout，这样就不会通过快速拖动鼠标进入鼠标中心来调用动画？提前致谢。

Answer 1

这是一个功能

var sections = ['home','about','contact','services'];

$.each(sections, function(i,val) {
    $('.' + val).mouseenter(function() {
        $('.' + val).stop().animate({left:'55%'}, 1000)
        $('#icon_' + val + ':hidden').delay(600).fadeIn(600);
    }).mouseleave(function(){
        $('.' + val).stop().animate({left:'50%'}, 1000)
        $('#icon_' + val).hide();
});

还有一个plugin called hoverIntent来帮助偶然的老鼠。

为了提高效率，您可以缓存DOM选择：

$.each(sections, function(i,val) {
    var main = $('.' + val);
    var icon = $('#icon_' + val);
    main.mouseenter(function(){
        main.stop().animate({left:'55%'}, 1000)
        icon.filter(':hidden').delay(600).fadeIn(600);
    }).mouseleave(function(){
        main.stop().animate({left:'50%'}, 1000)
        icon.hide();
});

此外，如果.home，.about等元素中只有一个，或者如果有更多元素，但处理程序仅用于影响接收事件的那个，那么你可以取代：

$('.' + val).stop()

使用：

$(this).stop()

Answer 2

你需要的是去抖...看看这个请记住，这将在特定超时后调用处理程序......

http://benalman.com/projects/jquery-throttle-debounce-plugin/

现在要把它变成一个部分，你可以为所有说menu定义第二个类。并使用$(".menu").something()设置处理程序。

$(".menu").bind({
  mouseenter: $.debounce(250,function() {}),
  mouseleave: function() {}
});

如果您希望去抖动也发生在mouseleave上，您可以使用

mouseleave: $.debounce(200, function(){})

请记住，您已从该网站导入jQuery的debounce扩展。 debounce不是内置于jquery中的。

帮助SetTimeout功能

2 个答案: