Question

I have a simple JQuery animation that reduces the opacity of a div on mouseover, back to 100% on mouseout, and on click moves the div down a few hundred pixels. Simple enough right?

Problem is: User clicks and it starts to move the div but if user moves mouse while its animating, a mouseout event is detected and it cancels the animation.

<!--MOUSEOVER ANIMATION-->

$(".roll").hover(function(){
    var rollid = $(this).attr('id');
    $("#h" + rollid).stop().animate({
    opacity: ".7"
    }, 400 );
});

$(".roll").mouseout(function(){
    var rollid = $(this).attr('id');
    $("#h" + rollid).stop().animate({
    opacity: "1"
    }, 400 );
});

<!--BUTTON CLICK-->
$(".roll").click(function(){
    $(".roll").removeClass("roll");
    var rollid = $(this).attr('id');
    $(".tbox").stop().animate({
    top: "540"
    }, 400,function(){
        $("#p1").fadeIn();
    });
});

Page link is http://www.megadyne.com/safezone/index2.php

Thanks!

Answer 1

The hover function can be used for hover in and out like so:

$(".roll").hover(function(){
    var rollid = $(this).attr('id');
    $("#h" + rollid).stop().animate({
        opacity: ".7"
    }, 400 );
}, function(){
    var rollid = $(this).attr('id');
    $("#h" + rollid).stop().animate({
        opacity: "1"
    }, 400 );
});

By the way you might want to change .stop() to .stop(true, true): http://api.jquery.com/stop/

Also there is the animation fadeIn & fadeOut: http://api.jquery.com/fadein/