jquery - 在鼠标悬停和鼠标移出时使用 fadeOut() 和 fadeIn()

Question

我的问题是，当我在 mouseover 上使用 fadeOut() 并在 mouseout() (在 < li > 组件上)上使用 fadeIn() 时，我没有得到我期望的结果。发生的情况是，有时当鼠标不在对象上时，我想要 fadeOut() 的按钮只是在循环中不断淡入和淡出，有时循环停止，有时则不会。

通过 mouseover 和 mouseout 使用 fadeOut 和 fadeIn 的正确方法是什么？

这是代码:

comment.onmouseout = function() {mouseOut(comment);};
comment.onmouseover = function() {mouseOver(comment);}; 

其中comment是一个基本的

，带有按钮作为子元素

function mouseOut(parent){
    var children = parent.childNodes;
    var i=0;
    for(i=1;i<children.length;i++){
        if(children.item(i).tagName=="INPUT"){
            $(children.item(i)).fadeOut();
        }
    }
}
function mouseOver(parent){
    var children = parent.childNodes;
    var i=0;
    for(i=1;i<children.length;i++){
        if(children.item(i).tagName=="INPUT"){
            $(children.item(i)).fadeIn();
        }
    }
}

Answer 1

发生这种情况是因为当不透明度达到 0 时，显示设置为无。所以元素消失，触发鼠标移出。

引用来自 .fadeOut()

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.

所以最好 animate改为不透明度

而不是淡出

$(children.item(i)).animate({opacity:0},  400);

而不是淡入

$(children.item(i)).animate({opacity:1},400);

<小时/>

另一个问题是动画排队。因此，您最好在开始下一个动画之前停止当前动画。

而不是淡出

$(children.item(i)).stop().animate({opacity:0},  400);

而不是淡入

$(children.item(i)).stop().animate({opacity:1},400);

<小时/>

如果您可以发布 HTML，那么发布纯 jquery 代码来处理整个问题会更容易。