Question

这是杀了我的！ LOL

我尝试了一切，悬停，鼠标悬停，鼠标中心......停止（真实）

为什么这么难？

我只是将你链接到页面，滚动大图，然后将鼠标放在按钮上 - 看看它是如何发射两次？

我希望那个洞区域停止，直到我离开它为止。

http://www.lapiazzaonline.com/owen/index2.html

$(".smerrick").mouseover(function(){
        $(".ssmerrick")
            .animate({bottom:"14px"}, 200).animate({top:"470px"}, 100);

            $(".melville").fadeTo(600, 0.2);
            $(".plainview").fadeTo(600, 0.2);
    });
    $(".smerrick").mouseout(function(){
        $(".ssmerrick")
            .animate({bottom:"14px"}, 200).animate({top:"510px"}, 100);

            $(".melville").fadeTo(0, 1);
            $(".plainview").fadeTo(0, 1);
    });

我将在这里发布代码，以防小提琴不保留代码供将来参考。感谢所有的帮助，这个似乎工作 - 但我没有尝试anikr因为这似乎很好。

JAVASCRIPT

<script type="text/javascript">
$(function() {
    $(".views strong").hover(
        function() {
            $(this).find('em').animate({'bottom':'0px'}, 200).end().closest('div').siblings().fadeTo(600, .2);
        },
        function() {
            $(this).find('em').animate({'bottom':'-30px'}, 200).end().closest('div').siblings().fadeTo(0, 1);
        }
    );
});
</script>

HTML

<div class="plainview views" style="opacity: 1; ">
    <div class="logo-plainview"></div>
    <a href="#"><strong><em>Plainview</em></strong></a>
    <p>1137 Old Country Road • Plainview, New York 11803</p>
    <p class="number">(516) 938-0800</p>
</div>



<div class="merrick views" style="opacity: 1; ">
    <div class="logo-merrick"></div>
    <a href="#"><strong><em>Merrick</em></strong></a>
    <p>2191 Merrick Road • Merrick, New York 11566</p>
    <p class="number">(516) 546-2500</p>            
</div>

CSS

.plainview {
    width:316px;
    position:absolute;
    top:0;
    left:0;
}
.logo-plainview {
    background:url(http://www.lapiazzaonline.com/owen/images/logo-plainview.png) no-repeat;
    height:124px;
    width:289px;
    position:absolute;
    top:18px;
    left:15px;
}
.plainview strong {
    background:url(http://www.lapiazzaonline.com/owen/images/plainview.jpg) no-repeat;
    height:474px;
    width:316px;
    position:absolute;
    top:166px;
    left:0;
    display: block;
}
.plainview strong em {
    background:url(http://www.lapiazzaonline.com/owen/images/s-plainview.png) no-repeat;
    height:164px;
    width:233px;
    position:absolute;
    bottom: -30px;
    left:43px;
    display: block;
    text-indent: -9999px;
}
.plainview p{
    width:316px;
    position:absolute;
    top:675px;
    left:0;
    text-align:center;
    color:#CCC;
    font-size:11px;
}

Answer 1

我很喜欢你的网站并且稍微摆弄它。 :) Here is jsFiddle

正如你所看到的，我把很多东西组合在一起。稍微更改了CSS并且有最终结果。

你的问题是什么？因为smerrick鼠标悬停在ssmerrick上时ssmerrick不包含smerrick，它会自动退出mouseout并触发ssmerrick功能。基本上我将smerrick放在{{1}}内并相应地更改了CSS。

Answer 2

尝试：

$(".smerrick").mouseover(function(){
        $(this)
            .animate({bottom:"14px"}, 200).animate({top:"470px"}, 100);

            $(".melville").fadeTo(600, 0.2);
            $(".plainview").fadeTo(600, 0.2);
    });
    $(".smerrick").mouseout(function(){
        $(this)
            .animate({bottom:"14px"}, 200).animate({top:"510px"}, 100);

            $(".melville").fadeTo(0, 1);
            $(".plainview").fadeTo(0, 1);
    });         
//and do accordingly

希望有所帮助

Answer 3

我看到了您的HTML代码。仅当您将鼠标悬停在小图像上然后移出时，该事件才会被触发两次。在这种情况下，较大的图像（应用事件的图像）会悬停两次，因此会有两个动画。

可以从

修改HTML

<a href="#">
     <div class="smerrick"></div>
     <div class="ssmerrick"></div>
</a>

到

<a href="#">
     <div class="smerrick"></div>
     <div class="ssmerrick" ></div>
     <div class="smerrick2"></div>
</a>

您可以使用css等效于

的所有三个商店进行叠加

.smerrick2 {
    left: 0;
    height : 474px;
    position: absolute;
    top: 166px;
    width: 316px;
    z-index: 999;
}

然后将鼠标绑定并将鼠标悬停在该叠加div上。这个想法是当你从小图片中移出时，你再次盘旋在较大的图像上，因此事件会发生两次。所以这样就可以停止了。

$(".smerrick2").unbind('mouseover').bind('mouseover', function(){

        $(".ssmerrick").animate({bottom:"14px"}, 200).animate({top:"470px"}, 100);
        $(".melville").fadeTo(600, 0.2);
        $(".plainview").fadeTo(600, 0.2);

}).unbind('mouseout').bind('mouseout', function(){

        $(".ssmerrick").animate({bottom:"14px"}, 200).animate({top:"510px"}, 100);
        $(".melville").fadeTo(0, 1);
        $(".plainview").fadeTo(0, 1);

});

看看这是否适合你。

由于

当滚动另一个div时，jquery mouseover再次触发

3 个答案: