gpt4 book ai didi

javascript - 为什么我需要使用 `setTimeout()` 来使 `jquery.animate` 在 Backbone View 中工作?

转载 作者:行者123 更新时间:2023-11-28 19:27:26 27 4
gpt4 key购买 nike

我想直接调用jquery.animate来改变div的效果,但发现没有任何效果。

相反,我需要将其放入 setTimeout(..., 0) 中才能使其正常工作。

我想知道为什么我需要这样做,这是最好的方法吗?

现场演示

http://jsbin.com/docahu/2/edit

或者在这里:

var FooView = Backbone.View.extend({
id: 'foo',
});

var BarView = Backbone.View.extend({

render: function() {
$("#foo").animate({width: '200px'});

// !!! HERE !!!
setTimeout(function() {
$("#foo").animate({height: '100px'});
}, 0);

return this;
}

});


var fooView = new FooView();
var barView = new BarView();

var combinedView = $(fooView.render().el).append(barView.render().el);

$(document.body).append(combinedView);
#foo {
width: 50px;
height: 50px;
background-color: blue;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Jquery animate delay problem in backbone render" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="//jashkenas.github.io/backbone/backbone-min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>

</body>
</html>

您可以看到高度发生了变化,但宽度没有变化。

<小时/>

附注:

我还发现 $(document).ready() 也可以工作:

$(document).ready(function() {
$("#foo").animate({height: '100px'});
});

哪个更好用?

最佳答案

这是因为它试图在元素进入 DOM 之前对宽度进行动画处理。如果您将选择器放在该位置,您可能会发现它什么也没有得到。

将超时设置为 0(以便 javascript 完成渲染,然后尝试动画)或等待文档完成渲染修复该问题

事情按以下顺序发生:

  1. 您渲染 View ,但它未附加到 DOM
  2. 宽度动画运行。什么也没有发生,因为“#foo”不在 DOM 上。
  3. 将其附加到 dom。
  4. 您的高度动画正在运行。它之所以有效,是因为“#foo”位于 DOM 中。

关于javascript - 为什么我需要使用 `setTimeout()` 来使 `jquery.animate` 在 Backbone View 中工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27579017/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com