Question

这真让我感到沮丧，因为这是一个简单的问题，我知道当有人给出一行答案时，我会亲自动手。无论如何，我在mouseenter片段上有以下内容

$("nav#primary ul li").mouseenter(function(){
    $(this).find('ul:first').stop(true, true).animate({
              height: ['toggle', 'swing'],
              opacity: 'toggle'
          }, 300, 'linear');
  });

我的问题是如何在鼠标离开原始ul？后反转动画效果？

Answer 1

$("nav#primary ul li").mouseenter(function(){
    //your code for mouseenter
},function(){
    //your code for mouseleave
});

Answer 2

如果我正确地理解了你的问题，那么当鼠标进入一个元素并在它离开时恢复到原始状态时，你就可以设置高度和不透明度。

$( "av#primary ul li" ).hover(
    function() {  // on mouse enter
        // save the original values
        var h = $(this).css('height');
        var o = $(this).css('opacity');
        $(this).attr('data-Oheight',h).attr('data-Oopacity',o);
        // do your animation here
    }, function() {     // on mouse leave
        // retrive the original values
        var h = $(this).attr('data-Oheight');
        var o = $(this).attr('data-Oopacity');
        // revert back
        //do your animation to revert back
    }
);

然而，话说回来，有来自GreenSock的TweenMax工具。这种动画要求非常方便。如果您需要了解更多信息，请与我们联系。

用鼠标离开反转jquery动画

2 个答案: