jquery 仅在第一次悬停时显示 div答案

【问题标题】：jquery show div only on first hoverjquery 仅在第一次悬停时显示 div
【发布时间】：2012-04-29 20:59:21
【问题描述】：

我正在尝试创建一个带有“popup”类的 div，它将淡入五秒钟，然后在悬停“left”时淡出，但仅在第一次悬停时。到目前为止，这是我的代码……

$(document).ready(function() {
var i = 1;
if (i == 1) {
    $('.left').hover(function() {
    $('.popup').fadeIn(1000); 
    }, 
    function() {
        $('.popup').fadeOut(1000);  
    });
    i++; 
}; 
});

【问题讨论】：

使用一个。 api.jquery.com/one
@LarryBattle。你是对的，但有些人喜欢以艰难的方式去做。阅读下面的答案...
@gdoron，有些人喜欢知道用多种方式做某事。以防其中一个不起作用。

标签： jquery variables if-statement hover fade

【解决方案1】：

$('.left').one('mouseenter', function() {
    $('.popup').fadeIn(1000); 
})
.one('mouseleave', function() {
    $('.popup').fadeOut(1000);  
});

【讨论】：

这看起来是最优雅的答案。不过，它目前无法在我的网站上运行……link

【解决方案2】：

如果你想让它一次性应用所有的 .left 元素，你可以像这样使用它的 .data() 属性：

$(document).ready(function() {     
    $('.left').hover(function() {
        if ($(this).hasData("hovered_once")==false) {
            $('.popup').fadeIn(1000); 
            $(this).data("hovered_once")=="yes";
        }
    }, 
    function() {
        $('.popup').fadeOut(1000);  
    });
});

【讨论】：

哇。太多的代码。 one 为您开箱即用（以更有效的方式）。阅读我的答案。
是的 one 也适合这个。但我喜欢使用.data :)
你知道处理程序一直在那里，如果你使用unbind o.k.，但你的代码根本不是最佳实践。 :(
是的，但是如果在第一个之后做不同的事情，这个更合适。

【解决方案3】：

你可以这样做。这是示例代码。

$(document).ready(function() {
  var i=1;
  $('.left').on({
        mouseenter: function (e) {
             if(i<2)
             {
              $('.popup').fadeIn(1000); 
                 i++;
             }
        },
        mouseleave: function (e) {
            $('.popup').fadeOut(1000);  
        }
    });

});

示例演示

http://jsfiddle.net/mediasoftpro/ZtWru/7/

【讨论】：