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

Question

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

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

这是代码:

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

其中comment是一个基本的<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,显示样式属性将设置为none,因此该元素不再影响页面的布局.

因此,animate不透明度会更好

而不是淡出

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

而不是fadein

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

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

而不是淡出

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

而不是fadein

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

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