jQuery停止FadeOut

Question

我正在使用Jquery在mouseover fadein和fadeout上显示一个div工作正常，但我想当用户将鼠标拖到div上时我想要阻止它淡出。

这是我的代码

<script type="text/javascript" language="javascript">
    function ShowToolTip(obj, _class,_ID) {
        var my_tooltip = $("#tooltip" + _ID);
        $(obj).removeAttr("title").mouseover(function () {
            my_tooltip.css({ opacity: 0.8, display: "none" }).fadeIn(400);
        }).mousemove(function (kmouse) {
            my_tooltip.css({ left: kmouse.pageX + 25, top: kmouse.pageY -my_tooltip.height() });
        }).mouseout(function () {
            my_tooltip.fadeOut(400);
        });

    }
</script>

Answer 1

您可以使用jQuery .stop函数：

my_tooltip.stop();

来自上述文档：

  

在元素上调用.stop（）时，当前正在运行的动画   （如果有的话）立即停止

Answer 2

假设每个obj都有自己的"#tooltip" + _ID：

function ShowToolTip(obj, _class,_ID) {
    var my_tooltip = $("#tooltip" + _ID);
    $(obj).removeAttr("title").mouseenter(function () {

        if(my_tooltip.data("closing") == "1") { // If closing
            my_tooltip.stop(true, true); //Stop closing animation
            my_tooltip.animate({ opacity: 0.8},0); //Show instantly
            my_tooltip.removeData("closing");
        } else { // if not closing
            my_tooltip.animate({ opacity: 0.8},400); //Fade in
        }
    }).mouseout(function () {
        my_tooltip.data("closing", "1"); //Flag that closing animation is running
        my_tooltip.fadeOut(400, function(){
            my_tooltip.removeData("closing"); //Fade out callback, remove flag
        });
    }).mousemove(function (kmouse) {
        my_tooltip.css({ left: kmouse.pageX + 25, top: kmouse.pageY -my_tooltip.height() });
    });
}