jQuery UI 在 Firefox 中多次执行悬停时的弹跳效果

Question

你们是我最后的选择，我希望你们在花了几个小时谷歌搜索我的问题后能够帮助我。

问题： 我有一段 "slides" 在图像的上半部分（悬停时）使用 jQuery UI 反弹效果。在 Firefox 上，如果我将鼠标悬停在图像的顶部（段落框最终将出现的位置），则弹跳将无限期执行。如果我悬停在底部，一切正常。

我已经在其他浏览器（甚至 IE）上测试了这个问题，它工作正常，完全符合我的预期。

我试过使用 .stop() 但没有效果。由于我仍在学习 jQuery（我 3 个月前开始学习），我正在努力寻找合适的解决方案。

如果你能帮助我，我将不胜感激。

干杯

P.S。这是我的代码：

HTML:

<div class="imgBox">
<img src="http://lorempixel.com/output/nightlife-q-c-260-260-2.jpg" alt="A-Accounts logo" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec lacinia mauris, ac tincidunt risus. Proin dictum blandit nisl, sed mollis nisi interdum eu.
    <button type="button" class="btn btn-primary db">Read more</button>
</p>

CSS

    .imgBox {
    width: 300px;
    height: 300px;
    border: 3px solid #dadada;
    border-radius: 10px;
    position: relative;
    box-shadow: 0px 0px 15px 0px #cacaca;
}
.imgBox:hover {
    box-shadow: none;
}
.imgBox img {
    margin: 20px auto;
    display: block;
}
.imgBox p {
    background: linear-gradient(#666666,#808080);
    height: 150px;
    width: 100%;
    color: #fff;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.7;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

jQuery

var main = function hoverDescription(){
    $('.imgBox').hover(
        function(){
            $(this).find('p').toggle( "bounce", 600 );
        },
        function(){
            $(this).find('p').toggle( "fold", 800 );
        }
    );
};

$(document).ready(main);

JSFiddle here

Answer 1

发生这种情况是因为，当您将鼠标悬停在图像上时，Para 标签会弹跳，同时它会再次悬停在图像上。

您可以像这样避免多次反弹

var main = function hoverDescription(){
    $('.imgBox').hover(
        function(){
            if($(this).find('p').css('display') != 'block')
                $(this).find('p').toggle( "bounce", 600 );
        },
        function(){
            $(this).find('p').toggle( "fold", 800 );
        }
    );
};

jQuery UI 在 Firefox 中多次执行悬停时的弹跳效果

jQuery UI bounce effect on hover executing multiple times in Firefox

firefox

jquery

jquery-ui