在 mouseover 和 mouseout 上使用 fadeOut() 和 fadeIn()答案

【问题标题】：Using fadeOut() and fadeIn() on mouseover and mouseout在 mouseover 和 mouseout 上使用 fadeOut() 和 fadeIn()
【发布时间】：2010-12-20 16:49:03
【问题描述】：

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

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

【问题讨论】：

也发布您的相关 html..

标签： jquery fadein fadeout

【解决方案1】：

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

引用来自.fadeOut()

.fadeOut() 方法为匹配元素的不透明度。 一次不透明度达到0，显示 style 属性设置为 none，因此元素不再影响布局页面。

所以最好改为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 代码来处理整个问题会更容易。

【讨论】：

【解决方案2】：

使用mouseenter、mouseleave将解决大部分由mouseout、mouseover引起的问题。 hover 环绕 mouseenter 和 mouseleave 以提供更好的处理。

【讨论】：