Question

$( ".menuicon" ).mouseenter(function() {
    $(this).animate({
       width: '100px'
    }, 300);
});

$( ".menuicon" ).mouseover(function() {
    $(this).animate({
       width: '36px'
    }, 300);
});

鼠标悬停时图标的宽度更改为100px，但很快就会恢复到36px，鼠标仍在其上。

Answer 1

您需要使用mouseleave事件，而不是mouseover：

$(".menuicon").mouseleave(function() {
    $(this).stop(true).animate({
        width: '36px'
    }, 300);
});

或者更好的是，将整个事情结合起来使用hover：

$(".menuicon").hover(
    function() { $(this).stop(true).animate({ width: '100px' }, 300); },
    function() { $(this).stop(true).animate({ width: '36px' }, 300); }
);

Answer 2

使用 mouseleave() 代替 mouseover() ，

$( ".menuicon" ).mouseleave(function() {
    $(this).animate({
       width: '36px'
    }, 300);
});

或者尝试 hover() ，

$( ".menuicon" ).hover(function() {
    $(this).animate({
       width: '100px'
    }, 300);
},function() {
    $(this).animate({
       width: '36px'
    }, 300);
});

Answer 3

$( ".menuicon" ).hover(function() {
    $(this).animate({
       width: '100px'
    }, 300);
},function() {
    $(this).animate({
       width: '36px'
    }, 300);
});

鼠标悬停时的动画宽度不起作用

3 个答案: