動畫寬度的李然後返回到默認寬度

我想知道是否有可能在動畫上懸停LI元素的寬度，然後將其返回到默認寬度onmouseout。我想我可以使用.css（）來獲取和存儲寬度的默認值在一個變量，但我不知道在哪裏或如何聲明該變量，以便它可以在下面的代碼中正常工作。任何幫助，將不勝感激。謝謝動畫寬度的李然後返回到默認寬度

$('#price-main-menu li').hover(function() { 
$(this).animate({width:"250px"},400); 
}, 
function() {$(this).animate({width: +a},400); 
});

好吧，我在這裏得到了一點點，它看起來像關鍵是$ .data（）。以下給我一個警告正確的值，但我不認爲我正確地引用變量作爲動畫值。

$('#price-main-menu li a').each(function() { 
$.data(this, 'width', $(this).css('width')); 
}); 

$('#price-main-menu li a').hover(function() { 
    $(this).animate({width:"250px"},400); 
    }, 
    function() { 
    var width = $.data(this, 'width'); 
    alert(width); 
    $(this).animate({width: +width},400); 
});

好的，在這裏回答了我自己的問題（儘管堆棧溢出不會讓我回答它）。感謝您的期待。

明白了。

$('#price-main-menu li a').each(function() { 
    $.data(this, 'width', $(this).css('width')); 
}); 

$('#price-main-menu li a').hover(
    function() { 
$(this).animate({width:"250px"},400); 
    }, 
    function() { 
var width = $.data(this, 'width'); 
    $(this).animate({width: width},400); 
    });

來源

2011-10-25 Brian

這是我做的樣品。（與您添加的foreach更新，但我建議使用width()而不是得到的CSS寬度）

http://jsfiddle.net/Quincy/5CALM/1/

$('#price-main-menu li').each(function() { 
     $.data(this, 'width', $(this).width()); 
    }); 
    $('#price-main-menu li').hover(function() { 

     $(this).stop().animate({width:"250px"},400); 
     }, 
     function() {$(this).stop().animate({width: $(this).data('width') + "px"},400); 
    });

我用data()存儲原始寬度並在設置寬度時添加'px'。另外，我建議您在添加stop()以停止當前動畫，然後再進行當前動畫，以便看起來更平滑。

來源

2011-10-25 03:09:41 Quincy

動畫寬度的李然後返回到默認寬度

回答

相關問題