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函數無法正常工作

回答

相關問題