12

我怎样才能做到这一点？

$('#element').animate({ "width": "calc(100% - 278px)" }, 800);
$('#element').animate({ "width": "calc(100% - 78px)" }, 800);

如果它是 only%或 only ，我可以做到px，但不是calc()，我可以使用 jQuery 的其他选项吗？还是 JavaScript 的其他技巧？

这是用户单击某个元素时必须完成的更改，因此：

$("#otherElement").on("click", FunctionToToggle);

当用户单击$("#otherElement")切换效果时，必须发生。

4

3 回答 3

18

也许这有帮助：

$('#element').animate({ "width": "-=278px" }, 800);

每次此脚本将从元素中删除 278px

编辑：试试这个，它会在调整窗口大小时重新计算。如果我理解正确，那应该会有所帮助。

$(window).on("resize",function(){
   $('#element').css("width",$('#element').width()-275+"px");
});

CSS3 选项

由于 CSS3 有一个动画功能，你也可以使用这个：

#element{
   -webkit-transition:all 500ms ease-out 0.5s;
   -moz-transition:all 500ms ease-out 0.5s;
   -o-transition:all 500ms ease-out 0.5s;
   transition:all 500ms ease-out 0.5s;
}

如果要为元素设置动画。你可以这样做：

 $('#element').css("width","calc(100% - 100px)");

在这种情况下，CSS 将执行动画。

请注意，这不适用于旧版浏览器

于 2014-02-20T14:59:54.903 回答
2

我不确定使用calc是否会成功。我的答案是检查父级的宽度，然后对其执行操作，然后为元素设置动画。

elWidth = $('#element').parent().width(); // Get the parent size instead of using 100%
elWidth -= 20; // Perform any modifications you need here
$('#element').animate({width: elWidth}, 500); //Animate the element

http://jsfiddle.net/yKVz2/2/

于 2014-02-20T15:16:57.987 回答
1

在@jfriend00 的评论的帮助下，我找到了另一种形式。

首先，我创建了 CSS 规则，但没有过渡。

在切换功能中：

$('#element').animate({ width: "-=200px" }, 800, function () { $('#element').addClass('acoreonOpened');$('#element').removeAttr("style") });

.acoreonOpened 是我使用 calc (100% - 278px) 的 CSS 规则的地方。

所以，首先我用jquery制作动画，当它结束时，我删除jquery使用的样式（如果没有，css将不起作用），在我放置类之后，它的行为就像一个带有%的宽度。

于 2014-02-20T15:30:49.333 回答