JQuery при наведении курсора снова при переходе через другой div

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);
    });         

Я опубликую здесь код, на тот случай, если fiddle не сохранит код для дальнейшего использования. Спасибо за помощь, кажется, что этот работает - но я не пробовал, потому что это нормально.

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

Мне очень понравился ваш сайт, и он немного возился с ним. :) Вот jsFiddle

Как видите, я сгруппировал много вещей. Немного изменил CSS и есть конечный результат.

В чем была ваша проблема? потому что smerrick не содержит ssmerrick, когда вы наводите курсор мыши на ssmerrick, он автоматически выходит из smerrick и вызывает функцию mouseout. В основном я поместил ssmerrick внутри smerrick и соответственно изменил CSS.

Answer 2

Я видел твой 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;
}

И связать мышь и навести курсор на этот оверлейный блок.Идея в том, что, когда вы уходите от маленького изображения, вы снова наводите курсор на большее изображение, поэтому событие запускается дважды.Таким образом, его можно остановить.

$(".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);

});

Посмотрите, работает ли это для вас.

Спасибо

Answer 3

Попробуйте:

$(".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

Надеюсь, это поможет