我可以使用jQuery独立动画属性

Question

我想独立动画元素的大小和位置，以便能够使用jQuery的stop()函数来清除一个属性而不是另一个属性的队列。我只动画width和left属性。

有办法做到这一点吗?

Answer 1

您需要使用jquery 1.7，但这是可以做到的。

http://jsfiddle.net/jRawX/16/

从1.7开始，您可以传递字符串作为queue参数。这将使动画在指定队列上排队，而不是在fx队列上。然后当你调用stop时，你可以传递相同的队列名。

$(function() {
    $("#stopTop").click(function() {
        $("#t1").stop("topQueue", true);
    });
    $("#stopLeft").click(function() {
        $("#t1").stop("leftQueue", true);
    });
    $('#t1').animate({
        left: 100
    }, {
        duration: 10000,
        queue: "leftQueue"
    }).animate({
        left: 600
    }, {
        duration: 10000,
        queue: "leftQueue"
    }).animate({
        top: 100
    }, {
        duration: 10000,
        queue: "topQueue"
    }).animate({
        top: 600
    }, {
        duration: 10000,
        queue: "topQueue"
    }).dequeue("topQueue").dequeue("leftQueue");
})

    .tester {
        background:red;
        width: 100px;
        height: 100px;
        left: 400px;
        top: 300px;
        position: absolute;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="tester" id="t1"></div>
<button id="stopTop">Stop Top</button>
<button id="stopLeft">Stop Left</button>