Question

I’m a bit new to jQuery and I am having trouble setting up a queue in this instance.

I am trying to do this: Upon mouseover the 1st queue entry is triggered. Then it waits until another mouseover to trigger the next queue entry. Cycle the queue infinitely.

http://jsfiddle.net/fChDX/

$("#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

Thanks to Felix’s jQuery Function Toggle Plugin, this was a piece of cake!

Updated jsFiddle to show the results.
http://jsfiddle.net/Wuq6M/