Question

我对jQuery有点新意，我在这个实例中设置队列时遇到了麻烦。

我正在尝试这样做：鼠标悬停时，会触发第一个队列条目。然后等待，直到另一个鼠标悬停触发下一个队列条目。无限循环队列。

$("#header").mouseover(function() {
    var $shineCopy = $("#shine111").clone();
    $shineCopy.appendTo('body').animate({
        width: "300px",
        height: "300px",
        opacity: 0,
        "left": 0,
        "top":  100
    }, 1000, function() {
        $(this).remove();
    });
    $shineCopy.appendTo('body').rotate({animateTo:180})
});

$("#header").mouseover(function() {
    var $shineCopy = $("#shine222").clone();
    $shineCopy.appendTo('body').animate({
        width: "300px",
        height: "300px",
        opacity: 0,
        "left": 0,
        "top":  200
    }, 1000, function() {
        $(this).remove();
    });
    $shineCopy.appendTo('body').rotate({animateTo:180})
});

$("#header").mouseover(function() {
    var $shineCopy = $("#shine222").clone();
    $shineCopy.appendTo('body').animate({
        width: "300px",
        height: "300px",
        opacity: 0,
        "left": 0,
        "top":  300
    }, 1000, function() {
        $(this).remove();
    });
    $shineCopy.appendTo('body').rotate({animateTo:180})
});

Answer 1

分别定义了三个函数，在页面级别定义了一个javascript计数器变量，并让你的mouseover事件更新coutner变量并根据它来决定调用哪个函数。如果你想确保在前一个运行时不会触发下一个，那么在start函数上设置第二个“isrunning”var，在remove函数上设置为false，并检查它。没什么好看的。

Answer 2

感谢Felix的jQuery Function Toggle Plugin，这是小菜一碟！

更新了jsFiddle以显示结果 http://jsfiddle.net/Wuq6M/

Jquery无限队列

2 个答案: