jQuery:淡出 - 做某事 - 淡入模式
我似乎经常编写类似于以下模式的 jQuery 代码:
Fade Out ==>在幕后做一些事情==>淡入
如下图所示:
/// <reference path="jquery-1.4.2.js" />
/// <reference path="jquery-1.4.2-vsdoc.js" />
/// <reference path="jquery.validate-vsdoc.js" />
var fade = "slow";
$(document).ready(function () {
// Some event occurs
$("#Trigger").change(function () {
var id = $(this).find(":selected").val();
// Fade out target while I do something
$("#Target").fadeOut(fade, function () {
if (id != "") {
// Do Something
$("#Target").load(
"/Site/Controller/Action/"+id, null,
function () {
// Fade in Target
$("#Target").fadeIn(fade);
});
}
});
});
});
这工作正常,但是回调层次结构变得非常深,我只是想知道是否有更简单的方法来做到这一点,或者更好的技术,不会导致这么多级别的回调
I seem to regularly write jQuery code of a pattern similar to this:
Fade Out ==> Do Something Behind the Scenes ==> Fade In
Illustrated below:
/// <reference path="jquery-1.4.2.js" />
/// <reference path="jquery-1.4.2-vsdoc.js" />
/// <reference path="jquery.validate-vsdoc.js" />
var fade = "slow";
$(document).ready(function () {
// Some event occurs
$("#Trigger").change(function () {
var id = $(this).find(":selected").val();
// Fade out target while I do something
$("#Target").fadeOut(fade, function () {
if (id != "") {
// Do Something
$("#Target").load(
"/Site/Controller/Action/"+id, null,
function () {
// Fade in Target
$("#Target").fadeIn(fade);
});
}
});
});
});
This works fine, but the callback hierarchy gets pretty deep and I'm just wondering if there's an easier way to do this or a better technique that doesn't result in so many levels of callbacks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
使用 jQuery 的
.queue
Use jQuery's
.queue
使用 jQuery.queue(),您可以附加多个命令以按顺序执行。
如何使用它取决于您想要做什么。这里有两个解决方案:
1)针对单个元素:
2)您可以以另一种方式看待它 - 创建一个执行许多操作的队列函数,然后在需要时执行它:
您还可以使用queue:false变量。这意味着队列不会等待此操作完成,因此将立即开始下一个操作。一起制作两个动画很有用:
使用 AJAX,队列会变得更加复杂。查看这篇文章:
这篇文章的 AJAX 队列 。
With jQuery.queue() you can append multiple commands to execute in sequence.
How you use it depends on what you want to do. Here's two solutions:
1) targeting a single element:
2)You could look at it another way- create a queue function which does many things, and then execute it whenever you want:
You can also use the queue:false variable. This means the queue wont wait for this operation to finish, so will start the next straight away. Its useful to do two animations together:
With AJAX, queues get a bit more complicated. Check out this post:
AJAX Queues on this post.