Question

你们是我的最后一招，我希望你们在花费数小时搜索我的问题后能够帮助我。

问题： 我有一个段落使用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中多次执行hover

1 个答案: