Question

I have a problem with events stacking up. I’ve got a matrix of large icons and when I mouseover one of them a textbox slides down. And everything is great for the first attempt, but if I mouseout and mouseover again on the same object – the event collision occurs, the box is sliding up down or never shows up, arrow-pointer dissapears etc. I’ve tried to put an alert, and the more I mouseover the same object the more alerts I get (3 mouseovers = 3 alerts).

Here is my html:

<div class="app">
    <a href="#appinfo-1"><img src="images/app001.png" alt="" /></a>
    <div class="apparrow"></div>
    <div id="appinfo-1" class="appbody">                            
        <div><img src="images/apptop.png" alt="" /></div>
        <div class="appwrapper">
            <div class="leftappborder"></div>
            <div class="appcontent">
                <h1>Web Based Administration (CMS)</h1>
                <p class="apptext">Lorem ipsum dolor sit amet. </p>
                <p class="incltick">Included</p>
            </div>                                  
            <div class="rightappborder"><!-- --></div>
        </div>                      
        <div><img src="images/appbottom.png" alt="" /></div>
    </div>
</div>

Here is my jQuery:

$(function(){
$(".app > a").mouseover(function() {

//some code deleted here

    var currentactive = $(this).attr("href");       
        // activate|deactivate infoblock
        $(currentactive).parent(".app").hover(
            function() {
                $(currentactive).queue(function() {
                    $(this).siblings(".apparrow").slideToggle(150);
                    $(this).css({"visibility":"visible"}).slideToggle(800, incltick);
                    $(this).dequeue();
                });                 
            },                  
            function() {
                $(currentactive).queue(function() {
                    $(this).css({"visibility":"hidden"}).slideToggle(800, incltick);                        
                    $(this).siblings(".apparrow").slideToggle(150); 
                    $(this).parent(".app").animate({marginBottom:0 +"px"}, 800, defaultState);  
                    $(this).dequeue();
                });
            }
        );
    }       
});

});

Answer 1

Inside of your mouseover you are calling $(currentactive).parent(".app").hover(....

This means that every time you mouse over you are attaching an additional hover. So if you mouse over 3 times, you get 3 hovers and the event fires 3 times. You shouldn’t attach events inside of other events which are going to get fired again. If you really have to, then set a flag and ensure it only gets attached once.