Very Fast jQuery hover iteractions Reset

Question

I'm using the following code to swap <div> contents. It functions properly with the exception of the mousein and mouseout behavior of the boxes, which shows the wrong one. The class name "flipped" has display set equal to none. Should I check state, use setTimeout() or another method to prevent this behavior?

The html

<div class="videobox">
        <div class="unflipped">
            <img src="videoprop.jpg">
            <div class="desc_over">This is a description! Video Contains This!</div>
        </div>
        <div class="flipped">This what displays when flipped 1!</div>
    </div>

The jQuery

$(".videobox").hover(function(){
            $(this).children(".unflipped:first").fadeOut("fast",function(){
                $(this).next(".flipped:first").fadeIn("fast");
            });         
        },function(){           
            $(this).children(".flipped:first").fadeOut("fast",function(){
                $(this).prev(".unflipped").fadeIn("fast");
            }); 
        });

score 0 · Accepted Answer · answered Feb 14 '12 at 18:16

0

Try separating them:

$('.videobox').find('.unflipped').mouseenter(function() {
    $(this).fadeOut("fast", function() {
        $(this).next(".flipped").fadeIn("fast");
    });
});
$('.videobox').find('.flipped').mouseleave(function() {
    $(this).fadeOut("fast", function() {
        $(this).prev(".unflipped").fadeIn("fast");
    });
});

answered Feb 14 '12 at 18:16

Mark Schultheiss

32,614
12
69
100

Thanks for the suggestion. It displayed similar problem where the second div state is stuck on display if moved fast across. – Codex73 Feb 14 '12 at 18:39
1

check out this question for similar http://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery – Mark Schultheiss Feb 14 '12 at 23:17
That question solution worked perfectly, thanks so much Mark. – Codex73 Feb 15 '12 at 03:34

Very Fast jQuery hover iteractions Reset

1 Answers1