问移动元素的jQuery动画()与addClass()
EN

Stack Overflow用户

提问于 2017-10-02 04:56:08

回答 3查看 110关注 0票数 0

要移动元素，我可以使用jQuery、动画()或addClass()

// for simplicity I omitted a lot of boiler code..

$("#box").animate({left: 100},{duration: 250});

// or addClass() with a CSS class for the box and moving: 

$("#box").addClass("move-box");
#box {
    transition: all 250ms linear;
}
.move-box { 
    left: 100; 
}

我知道动画()有一个限制，即属性只能是单个数值(除非您还导入jQuery UI)。因此，这个问题是关于移动框，这是一个数值。

使用哪种功能有关系吗？在表现上有差异吗？

javascript

jquery

animation

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-10-02 05:34:31

这个问题非常广泛，你在你的案例中使用什么并不重要。您的动画非常简单，不会使用很多资源来执行。不过，我建议大多数时候使用CSS动画。原因如下：

性能

如果你使用CSS动画，CSS动画将会更清晰、更快、更流畅。它是在浏览器中构建的，不需要额外的计算，jQuery需要。您甚至可以看到最近的插件，如滑块使用CSS动画的原因。

控制

CSS动画有更好的控制，无需导入额外的库。放松是很容易操作的立方贝塞尔，你可以动画，开箱，像颜色，变换，等等.

三维动画

在CSS中动画3D属性是一件轻而易举的事情。使用CSS的性能也会更高。

响应式

如果您有不同的响应值，那么使用CSS可以更容易地管理一切。简单的媒体查询可以代替笨重、混乱的Javascript条件。此外，如果您的动画在某些屏幕上应用，您将不必声明一个函数来重置HTML标记上的样式，因为CSS动画不会将样式放在style=""中；它很容易被夸大。

我在使用jQuery动画时看到的唯一优点是它更容易设置。关键字'toggle'也很不错，您需要在CSS中模仿它。

票数 0

Stack Overflow用户

发布于 2017-10-02 07:08:49

如果性能是一个问题，并且您的动画是通过添加类触发的，您可以使用香草Javascript这样做，这将优于上面列出的两个JQuery方法：

document.getElementById('box').classList.addClass('move-box');

classList可在包括IE10+在内的所有现代浏览器中使用。

票数 1

Stack Overflow用户

发布于 2017-10-02 05:25:00

你使用动画时，你想要“动画”和元素，因为它强调。它允许您以所需的速度完成动画，但它还将内联样式属性添加到HTML标记中，如果动画不是必需的，则这不是首选。添加类更聪明，更少乱七八糟，您也可以删除类而不留下任何标记。但是动画还有一个比添加类更有用的未来，也就是说，您可以在动画的末尾添加另一个函数。每当动画停止时，您可以触发另一个函数，但是如果您不需要创建动画，那么上面提到的功能是无用的。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46525925

复制

.htaccess的重写规则

http apache windows access tcp/ip

.htaccess是Apache服务器的一个非常强大的分布式配置文件。正确的理解和使用.htaccess文件，可以帮助我们优化自己的服务器或者虚拟主机。

Java架构师必看

2021/03/22

2.1K0

Apache URL重写规则