Question

我想知道是否可以在悬停时为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);
   });

Answer 1

这是我制作的示例。（使用您添加的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()以停止当前动画，以使其看起来更流畅。

li的动画宽度然后将其返回到默认宽度

1 个答案: