javascript - 通过 .animate() 和 .css() 设置宽度之间的差异

Question

我试图通过 JQuery 重置元素的宽度(我已经为其设置了宽度 - 类似于 Toggle 行为)。我遇到了一个有趣的问题。

如果我这样做，它工作，当然没有任何动画:

$(this).parents(".galbox_viewpic_cont:first").css("width","");

如果我这样做，它无法正常工作。它将宽度设置为整个文档的 100%。

$(this).parents(".galbox_viewpic_cont:first").animate({"width":""},function(){});

我也试过指定自动，但它也不起作用。

$(this).parents(".galbox_viewpic_cont:first").animate({"width":"auto"},function(){});

请帮我解决这个问题。我想要一个动画，但仍希望它能正常工作。

Answer 1

您必须为数值设置动画，“”和“auto”不是数值，因此 jquery 或任何其他库无法将值从一帧插入到另一帧。

通过css方法设置width为""实际上是清除了width属性，让元素根据继承的属性取宽度。通常这意味着“”与“自动”相同。您可以在浏览器的 Web 开发人员检查器中进行检查。

备选方案 1

如果您的场景允许，定义开始和结束宽度并使用这些值来制作动画。如果元素的宽度不依赖于浏览器的宽度、其内容或任何其他响应行为，这应该是一个可行的选择。

// start
$(this).parents(".galbox_viewpic_cont:first").css({"width":"300px"});

// end
$(this).parents(".galbox_viewpic_cont:first").animate({"width":"600px"},function(){});

备选方案 2

您还可以通过 .css 方法设置宽度，并为元素设置 css 过渡。这样以任何方式改变宽度都会产生平滑的动画。

.galbox_viewpic_cont:first{
    -webkit-transition: width 500ms ease-in;
    -moz-transition: width 500ms ease-in;
    transition: width 500ms ease-in;
}

// then via js
$(this).parents(".galbox_viewpic_cont:first").css({"width":"300px"});

// a bit later
$(this).parents(".galbox_viewpic_cont:first").css({"width":"600px"});

这会导致动画过渡。但是，将 .css 设置为“auto”或“”也不会为其设置动画。

备选方案 3

然后您可以像这样自动设置数字起始值。

// start
var initialWidth = $(this).parents(".galbox_viewpic_cont:first").css('width');

// then do your thing
// then animate to a target width
 $(this).parents(".galbox_viewpic_cont:first").animate({"width":"600px"},function(){});

// then to reset the animation, set it to the initial width
$(this).parents(".galbox_viewpic_cont:first").animate({"width":initialWidth+'px'},function(){});