CODEWITHSUNDEEP
jquery
jasmine
jasmine

Reputation:

jquery mouseout event

In this code:

$(document).ready(function()
{
    $(".main_image .desc").show(); //Show Banner
    $(".main_image .block").animate({ opacity: 0.65 }, 1 ); 
    $(".image_thumb ul li:first").addClass('active');  
    $(".image_thumb ul li").click(function () 
    {
        var imgAlt = $(this).find('img').attr("alt");
        var imgTitle = $(this).find('a').attr("rel");
        var imgDesc = $(this).find('.block').html();
        var imgDescHeight = $(".main_image").find('.block').height();

        if ($(this).is(".active")) 
        {
        return false;
        } 
        else 
        {
            $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, 
            function() {
                $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom:"0" }, 250 );
                $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
            });
        }
    });

i have changed click with mouse over, but how can i set mouseout event? Thanks in advance

Upvotes: 1

Views: 980

Answers (1)

user113716
user113716

Reputation: 322452

I don't see your mouseover event handler.

If you want a mouseover/mouseout handler, use hover() like so:

$('.myelement').hover(
function() {
    // my mouseover code
},
function() {
    // my mouseout code
});

EDIT:

OK, I think I understand. To bind a 'mouseout' event (or any event) do the following:

$('#myelement').bind('mouseout', function() {
    // my code
});

PREVIOUS EDIT:

If you are saying that you want to 'stop' the current animation, then you need to call stop(). Consider the following example:

$('#box').hover(
        function() {
            $(this).stop();
            $(this).animate({height:300}, 1000);
        },
        function() {
            $(this).stop();
            $(this).animate({height:100}, 1000);
        });

#box {
    background: orange;
    width: 100px;
    height: 100px;
}

<div id='box'></box>

If the animation is in progress when you 'mouseout', calling $(this).stop() will halt the animation and start the 'mouseout' animation. If there is no animation for 'mouseout', then simply call $(this).stop().

Upvotes: 3

Related Questions