jQuery动画填充为零 [英] jQuery Animate Padding to Zero

问题描述

我有以下代码段，这些代码在悬停时切换填充(请参见示例此处 ):

I have the following snippet that toggles padding when hovering (see example here):

<div id="outer"><div id="inner"></div></div> 
<script> 
  $("#inner").mouseenter(function () {
    $("#outer").animate({ 'padding' : '20px' }, "slow");
  });
  $("#inner").mouseleave(function () {
    $("#outer").animate({ 'padding' : '0px' }, "slow");
  });
</script>

目标是使填充动画入场和出场，但是目前没有动画可以动画出场.我做了一些测试，如果我将假距填充更改为10像素(从0像素)，它将运行动画，但从零开始并向外动画.我正在运行jQuery 1.4.3.有什么办法解决这个问题吗?

The goal is to have the padding animate both in and out, however currently no animation appears for animating out. I did some tests, and if I change the leave padding to 10 pixels (from 0 pixels) it runs an animation, but starts at zero and animates outwards. I'm running jQuery 1.4.3. Any way to fix this?

推荐答案

绝对是1.4.3中的动画错误，现在您可以通过对各个属性进行动画处理来解决此问题:

Definitely an animation bug in 1.4.3, for now you can work-around by animating the individual properties like this:

$("#inner").mouseleave(function () {
  $("#outer").animate({ 
    'padding-top' : 0,
    'padding-right' : 0,
    'padding-bottom' : 0,
    'padding-left' : 0,
  }, "slow");
});

您可以在此处进行测试.

这篇关于jQuery动画填充为零的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！