Question

This is killing me! LOL

I tried everything, hover, mouseover, mouseenter…stop(true)

Why is this so hard?

I am just going to link you to the page, roll over the big picture, then place you mouse lower on the button – see how it fires twice?

I want that hole area to stop, until I leave my mouse from it.

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

I will post here the code, just in case fiddle doesn’t keep the code for future reference.
Thanks for all the help, this one seems to work – however I didnt try anikr beacuse this seems fine.

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">[phone]</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">[phone]</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

I liked your site a lot and fiddled with it a bit. 🙂 Here is jsFiddle

As you can see I grouped lots of things together. Changed CSS a little bit and there is the final result.

What was your problem? because smerrick not contains ssmerrick when you mouse over ssmerrick it automatically gets out of smerrick and triggers mouseout function. Basicly I put ssmerrick inside smerrick and changed CSS accordingly.