Question

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

使用鼠标悬停和鼠标移除来使用fadeOut和fadeIn的正确方法是什么？

这是代码：

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

其中评论是基本的＆lt; li>带按钮作为孩子

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()

的

引用

.fadeOut（）方法动画匹配元素的不透明度。的一旦不透明度达到0，显示 style属性设置为none ，所以元素不再影响布局页面。

因此，animate不透明度会更好

而不是 fadeout

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

而不是 fadein

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

另一个问题是动画排队。所以你最好在开始下一个动画之前停止当前动画。

而不是 fadeout

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

而不是 fadein

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

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

Answer 2

使用mouseenter，mouseleave将解决由mouseout，mouseover引起的大多数问题。 hover包裹mouseenter和mouseleave以提供更好的处理。

在mouseover和mouseout上使用fadeOut（）和fadeIn（）

2 个答案: