jquery - Animating width on mouse hover not working

Question

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

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

The icon's width changed to 100px on mouse hover, but soon comes back to 36px with the mouse still on it.

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