Question

首先，我无法提供小提琴，因为Chrome控制台正在返回＆＃34; Undefined不是一个功能＆＃34;一百万次，没有办法阻止它。我正在使用MacRabbit Espresso，并且这个功能在该控制台中编写的功能似乎没有问题：

$(function() {
    $('.sponsored_ad').on("mouseenter", function() {
        $(this).animate({ opacity: 1.0 }, 500, function(){
            $('.info_div', this).show("slide", { direction: "down" },500);
        });
    });

    $('.sponsored_ad').on("mouseleave", function() {
        $(this).animate({ opacity: 0.70 }, 500, function(){
            $('.info_div', this).hide("slide", { direction: "down" }, 100);
        });
    });
});

这是html：

<div id="ad_container"> 
    <div class="sponsored_ad"><img src="blackad.png" alt="" /> <div class="info_div">Hello, my name is Greg</div></div>
    <div class="sponsored_ad"><img src="redad.png" alt="" /> <div class="info_div">Hello, my name is Brad</div></div>
    <div class="sponsored_ad"><img src="bluead.png" alt="" /> <div class="info_div">Hello, my name is Linda</div></div>
    <div class="sponsored_ad"><img src="greenad.png" alt="" /> <div class="info_div">Hello, my name is Jason</div></div>
    <div class="sponsored_ad"><img src="blackad.png" alt="" /> <div class="info_div">Hello, my name is Kathleen</div></div>
    <div class="sponsored_ad"><img src="redad.png" alt="" /> <div class="info_div">Hello, my name is Percy</div></div>
    <div class="sponsored_ad"><img src="bluead.png" alt="" /> <div class="info_div">Hello, my name is Bruce</div></div>
    <div class="sponsored_ad"><img src="greenad.png" alt="" /> <div class="info_div">Hello, my name is John</div></div>
</div>

和css：

#ad_container{
    width: 620px;
    /*text-align: justify;*/
}
.sponsored_ad {
    height: 195px;
    width: 195px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    margin-bottom: 3px;
    position: relative;
}

.info_div {
    width:195px; 
    height:195px; 
    background-color:#4a4a4a; 
    color:#FFF;  
    text-align:center;  
    opacity:0.95;  
    filter:alpha(opacity=95); 
    position:absolute;  
    bottom:0px;   
    display:none; 
}

我的第一个问题是我不想引导鼠标中心触发器，直到光标停留在div上并且类为＃34; spons_ad＆＃34;。可能与第一个问题有关的第二个问题是，我不希望在最近的mouseout事件结束之前触发mousenter事件。

在setTimeOut函数中包装mouseenter代码会停止mouseout事件的触发。

我还尝试使用hoverIntent重构，完全使用git网站上的代码，但这不起作用（另外，由于我之外的原因，$（this）引用了整个文档，即使它只应引用$（＆＃39; sponsored_ad＆＃39）

显然我知道jQuery足够危险。任何帮助都非常感谢。

如何在mouseleave功能完成之前阻止mouseenter函数触发？

0 个答案: