使用 jQuery animate() 增加/减少当前填充

Posted 2023-05-08

【中文标题】使用 jQuery animate() 增加/减少当前填充

【英文标题】：Using jQuery animate() to increase/decrease current padding

【发布时间】：2020-10-29 02:04:49

【问题描述】：

我正在尝试在悬停时增加/减少 div 的右填充（+= 和 -=），并且还想要一个动画效果。下面的代码正在完成这项工作，但没有动画。

    myDiv.mouseenter( function() 
      $(this).css('padding-right' : '+=35px');
    );

    myDiv.mouseleave( function() 
      $(this).css('padding-right' : '-=35px');
    );

P.s.，animate() 函数在值中使用“-=”或“+=”时会引发错误。

提前致谢！

【参考方案1】：

当我检查时，以下代码在 Chrome 中运行良好......

<script> 
      $(document).ready(function () 
         var myDiv = $("#box");
         $("#box").mouseenter(function () 
            $(this).animate(
               'padding-right': '+=35px'
            , 300)
         );

         $("#box").mouseleave(function () 
            $(this).animate(
               'padding-right': '-=35px'
            , 300)
         );
        
      );
</script>

<div id="box" class="box" style="background-color:red; float:left">Test</div>

【讨论】：

嘿！谢谢。实际上我忘了在这里写，但在实际代码中。我正在寻找的代码是动画这个变化

在我的回答中查看更改的代码...使用.animate 而不是.css

我试过这个。但它在使用 += 或 -= 时显示错误

嘿，谢谢！有效。不知道为什么，但我之前尝试过它时抛出错误！