如何在jQuery中为同一个div中的多个项设置动画？

这是我的html代码：

<div class ="row respect-row">
    <div class="col-xs-6 myclass1">
        <h2 id ="respect-hover">MY HEADER</h2>
        <p style="display:none">paragraph text paragraph text paragraph text paragraph text paragraph text</p>
    </div>
</div>

我想要达到的目标：

向上滑动，或者在我的例子中，在鼠标上方向上移动40像素的h2（标题）

当h2向上移动后，我想先将宽度从160更改为320，然后用160px向左滑动

当我的div向左滑动时，我想显示我的段落。 再看一看图片：

在mouseout上，与mouseover发生的事情相反。有人能帮我吗

---

更新：

这有点棘手。jQuery动画队列是围绕单个元素的动画/停止而设计的。为多个元素创建一个行为良好的队列并不简单

我说的“行为良好”是什么意思？你想要的行为可以通过几种方式实现。然而，停止包含多个元素的动画队列并不是那么简单。这是快速mouseenter mouseleave操作的一个问题。在您自己的解决方案中尝试一下，您会发现动画可能会变得混乱

可能有几种方法可以克服这个问题。这里有一个涉及承诺链，如果之前的动画链仍在进行中，还可以使用一种机制杀死它们

var t = 700;
$(".respect-row").on('mouseenter', function () {
    //In case an earlier animation is still in progress ...

    //...(i) withdraw permission for any earlier animation to continue
    var $this = $(this).data('continue', false);

    //...(ii) stop everything.
    $this.stop(true, true);
    var $h2 = $this.find("h2").stop(true, true);
    var $p = $this.find("p").stop(true, true);

    // Animations, each defined as a named function that returns a promise
    function anim1() {
        if($this.data('continue')) {
            return $h2.animate({
                'marginTop': '0px',
                'marginBottom': '20px'
            }, t).promise();//allow the rest of the animation chain to continue
        } else {
            return $.Deferred().reject().promise();//suppress the rest of the animation chain
        }
    }
    function anim2() {
        if($this.data('continue')) {
            return $this.animate({
                'width': '320px'
            }, t).promise();//allow the rest of the animation chain to continue
        } else {
            return $.Deferred().reject().promise();//suppress the rest of the animation chain
        }
    }
    function anim3() {
        if($this.data('continue')) {
            return $p.fadeIn(t).promise();//allow the rest of the animation chain to continue
        } else {
            return $.Deferred().reject().promise();//suppress the rest of the animation chain
        }
    }

    //Invoke forward animations with `continue` set to true
    $this.data('continue', true);
    anim1().then(anim2).then(anim3);
});
$(".respect-row").on('mouseleave', function revert() {
    //In case an earlier animation is still in progress ...

    //...(i) withdraw permission for any earlier animation to continue
    var $this = $(this).data('continue', false);

    //...(ii) and stop everything.
    $this.stop(true, true);
    var $h2 = $this.find("h2").stop(true, true);
    var $p = $this.find("p").stop(true, true);

    // Animations, each defined as a named function that returns a promise
    function anim1() {
        if($this.data('continue')) {
            return $h2.animate({
                'marginTop': '20px',
                'marginBottom': '0px'
            }, t).promise();//allow the rest of the animation chain to continue
        } else {
            return $.Deferred().reject().promise();//suppress the rest of the animation chain
        }
    }
    function anim2() {
        if($this.data('continue')) {
            return $this.animate({
                'width': '160px'
            }, t).promise();//allow the rest of the animation chain to continue
        } else {
            return $.Deferred().reject().promise();//suppress the rest of the animation chain
        }
    }
    function anim3() {
        if($this.data('continue')) {
            return $p.fadeOut(t).promise();//allow the rest of the animation chain to continue
        } else {
            return $.Deferred().reject().promise();//suppress the rest of the animation chain
        }
    }

    //invoke reverse animations with `continue` set to true
    $this.data('continue', true);
    anim3().then(anim2).then(anim1);
});

-放慢速度，使序列更易于观察

我担心您自己的解决方案的简单性已经消失，除非您习惯于使用承诺，否则这将不是最明显的解决方案，但您会发现它在快速鼠标移动方面是可靠的

---

顺便说一句：以前尝试使用

.queue（）

和

dequeue（）

在实现所需动画序列方面更为优雅，但抑制它被证明是困难的。我放弃了，回到了承诺，我明白了。

最后，我成功了。以下是我的答案：

---

如果你有一个更好的版本，我会很乐意接受并标记它。

你使用

。尊重行

选择器，但你的html中没有它。。。另外，请添加一个JSFIDLE，以便人们可以帮助您。请纠正我的错误，再次查看我的帖子。我知道这完全是一团糟，但至少我尝试过：）我还认为您设置的页边距存在一般性问题。-=在一个重影中重复减法，这样就真的会陷入一片混乱：）动画看起来不错，但你意识到这三个步骤是并行运行的，而不是顺序运行的吗？我在完成脚本时就知道了，这就是我目前正在做的工作。如果你可以发布一个答案，我会接受它作为答案OK，我已经用一些实际有效且表现良好的东西替换了我的原始答案。原始答案被覆盖了-太简单了，不起作用。

var t = 700;
$(".respect-row").on('mouseenter', function () {
    //In case an earlier animation is still in progress ...

    //...(i) withdraw permission for any earlier animation to continue
    var $this = $(this).data('continue', false);

    //...(ii) stop everything.
    $this.stop(true, true);
    var $h2 = $this.find("h2").stop(true, true);
    var $p = $this.find("p").stop(true, true);

    // Animations, each defined as a named function that returns a promise
    function anim1() {
        if($this.data('continue')) {
            return $h2.animate({
                'marginTop': '0px',
                'marginBottom': '20px'
            }, t).promise();//allow the rest of the animation chain to continue
        } else {
            return $.Deferred().reject().promise();//suppress the rest of the animation chain
        }
    }
    function anim2() {
        if($this.data('continue')) {
            return $this.animate({
                'width': '320px'
            }, t).promise();//allow the rest of the animation chain to continue
        } else {
            return $.Deferred().reject().promise();//suppress the rest of the animation chain
        }
    }
    function anim3() {
        if($this.data('continue')) {
            return $p.fadeIn(t).promise();//allow the rest of the animation chain to continue
        } else {
            return $.Deferred().reject().promise();//suppress the rest of the animation chain
        }
    }

    //Invoke forward animations with `continue` set to true
    $this.data('continue', true);
    anim1().then(anim2).then(anim3);
});
$(".respect-row").on('mouseleave', function revert() {
    //In case an earlier animation is still in progress ...

    //...(i) withdraw permission for any earlier animation to continue
    var $this = $(this).data('continue', false);

    //...(ii) and stop everything.
    $this.stop(true, true);
    var $h2 = $this.find("h2").stop(true, true);
    var $p = $this.find("p").stop(true, true);

    // Animations, each defined as a named function that returns a promise
    function anim1() {
        if($this.data('continue')) {
            return $h2.animate({
                'marginTop': '20px',
                'marginBottom': '0px'
            }, t).promise();//allow the rest of the animation chain to continue
        } else {
            return $.Deferred().reject().promise();//suppress the rest of the animation chain
        }
    }
    function anim2() {
        if($this.data('continue')) {
            return $this.animate({
                'width': '160px'
            }, t).promise();//allow the rest of the animation chain to continue
        } else {
            return $.Deferred().reject().promise();//suppress the rest of the animation chain
        }
    }
    function anim3() {
        if($this.data('continue')) {
            return $p.fadeOut(t).promise();//allow the rest of the animation chain to continue
        } else {
            return $.Deferred().reject().promise();//suppress the rest of the animation chain
        }
    }

    //invoke reverse animations with `continue` set to true
    $this.data('continue', true);
    anim3().then(anim2).then(anim1);
});

$(".respect-row").mouseenter(function(){

            $(this).find("h2").stop(true, true).animate({
                'marginTop' : "-=60px"
            },200);

            $(this).stop(true, false).animate({ width: "320px" });
            //$(this).find("p").show();
            $(this).find("p").fadeIn( 1200 );
        });
        $(".respect-row").mouseleave(function(){
            $(this).find("h2").stop(true, true).animate({
                'marginTop' : "+=60px"
            },200);
            $(this).stop(true, false).animate({ width: "160px" });
            $(this).find("p").hide();
        });