jquery 鼠标移出事件

Question

在此代码中:

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

我已经更改了鼠标悬停时的单击，但如何设置鼠标移出事件？提前致谢

Answer 1

我没有看到您的鼠标悬停事件处理程序。

如果你想要一个 mouseover/mouseout 处理程序，请使用hover()，如下所示:

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

编辑:

好的，我想我明白了。要绑定(bind)“mouseout”事件(或任何事件)，请执行以下操作:

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

先前编辑:

如果您想要“停止”当前动画，那么您需要调用 stop()。考虑以下示例:

$('#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>

如果在“鼠标移开”时动画正在进行中，则调用 $(this).stop() 将停止动画并启动“鼠标移开”动画。如果“鼠标移开”没有动画，则只需调用 $(this).stop()。