jQuery Animate函数无法正常工作

我正试图在div上实现animate函数，当鼠标悬停在它上面时文本会稍微展开，然后在鼠标离开时恢复到其原始大小。jQuery Animate函数无法正常工作

现在用我的代码，每当我将鼠标悬停在它上面，它就会不断收缩成一个小矩形。我在做什么不正确？

<script> 
    $(function() { 
     var container = $('div.slider').css('overflow', 'hidden').children('ul'), 
      slider = new Slider(container, $('#slider-nav')); 

     slider.nav.find('button').on('click', function() { 
      slider.setCurrent($(this).data('dir')); 
      slider.transition(); 
     }); 
    })(); 

</script> 

<script type="text/javascript"> 
    (function() { 
     //var dd = $('dd'); 
     //dd.hide(); 

     $('dd').filter(':nth-child(n+4)').hide(); 
     $('dl').on('click', 'dt', function() { 
      $(this) 
       .next().hide() 
       .slideDown(200) 
       //.show() 
       .siblings('dd') 
       .slideUp(200); 
      //.hide(); 
      //$(this).next().show(); 
     }); 
    })(); 
</script> 

<script type="text/javascript"> 
    $(function() { 
     $('#admission').on('mouseenter', function() { 
      $(this).animate({ 'fontSize': '+=2', 'height': '+=25', 'width': '+=20' }, 'swing') 
     }); 
     $('#admission').on('mouseleave', function() { 
      $(this).stop().animate({ 'fontSize': '-=2', 'height': '-=25', 'width': '-=20' }, 'swing') 
     }); 
    }); 
</script>

最后的<script>.... ('#admission')..代码是与问题的代码。

来源

2017-03-03 StraightUp

它在当天早些时候也在为我工作，但不知道为什么它决定对我疯狂。 – StraightUp

我可以问你为什么使用jQuery来做这样的事情吗？你可以在CSS中使用简单的'：hover'属性来实现。 – junkfoodjunkie

我认为问题是'.stop（）'。如果您在前一个动画完成前悬停多次，则会停止中间的上一个动画，然后下一个动画将从当前大小*开始*。如果你动画到一个特定的大小，而不是使用'+ = 2'和' - = 2'来修复它，因为那么未来的动画将无法继续建立在过去的动画上。或者使用'.stop（true，true）'进入和离开，虽然[有点生涩]（https://jsfiddle.net/Larw3rc7/1/）。 – nnnnnn

我修改这样，它的工作正常。

$(function() { 
     $('#admission').on('mouseenter', function() { 
      $(this).animate({ 'fontSize': '+=2', 'height': '+=25', 'width': '+=20' }, 'swing') 
     }); 
     $('#admission').on('mouseleave', function() { 
      $(this).stop().animate({ 'fontSize': '-=2', 'height': '-=25', 'width': '-=20' }, 'swing') 
     }); 
    }); 
</script>

就绪函数需要$和很少重新格式化，并在最后有一个额外的（）几个括号。

来源

2017-03-03 03:26:42 Cooper

我不知道为什么它仍然不起作用。我用我在页面中使用的所有脚本语句编辑了我的文章。只是为了看看这可能是问题。前两个脚本函数正在工作，但不是最后一个。 – StraightUp

jQuery Animate函数无法正常工作

回答

相关问题