jQuery div 从左到右动画并在暂停后返回答案

【问题标题】：jQuery div animate from left to right and comes back after pausejQuery div 从左到右动画并在暂停后返回
【发布时间】：2016-03-18 05:50:56
【问题描述】：

单击“提交”按钮时，我试图将 div 从左侧滑到右侧。稍作停顿后，div 会自动滑回原来的位置。目前它在右侧，但不会回到左侧。

CSS

#mainform{
    position: absolute;
    display: block;
    padding-top:20px;
    font-family: 'Fauna One', serif;
}

HTML

 <div id="mainform">

        <!-- Required div starts here -->
        <form id="form">
            <h3>Contact Form</h3>
            <div class="hello"></div>
           <input type="button" id="submit" value="Send Message"/>
        </form>


    </div>

  $(document).ready(function() {
            $('#submit').click(function(e) {
                reslide();

                function reslide() {
                    $('#mainform').delay().animate({width: '510px', left: '1050'}, 600).delay(5000).animate({width: '510px', right: '1000px'}, 200, function() {
                        setTimeout(reslide, 3000);
                    });
                }
                $('.hello').fadeIn(1500);
                $("<b>Successfully send</b>").appendTo(".hello");
                $('.hello').fadeOut(2500);
            });
});

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

当您在提交之后/之前向用户提供反馈时，请尝试使用CSS3 Transform 而不是实际移动/调整对象大小。

function slide($obj) { // jQuery object of element
    $obj.css("transform", "translateX (50px)");
    setTimeout(function(){
      $obj.css("transform", "none");
    }, 5000);
}

为了使其平滑（真实动画）应用CSS3 Transition 属性。

<style>
.object {
    transition: transform 0.6s;
}
</style>

或者你可以缩短，如果你确定一切都会顺利的话。

function slide($obj) { // jQuery object of element
    $obj.animate("transform", "translateX (50px)")
         .delay(600).
         .animate("transform", "translateX (0px)");
}

PS;在我的经验中jQuery.delay(); 并不总是使用排队动画，我不完全确定为什么。事实上，这种情况只是偶尔发生。有时认为它不起作用

// not working
$("smth").animate({"rule":"val"}).delay(500).animate("rule":"val");

// working
$("smth").animate({"rule":"val"})
setTimeout(function(){
   $("smth").animate({"rule":"val"})
}, 1000);

【讨论】：

【解决方案2】：

它不起作用的原因是，当您将right 添加到元素时，您还保留了left 的原始值，因此该元素不会“返回”。将left: '', 添加到第二个animate 函数中，您应该很高兴：

function reslide() {
    $('#mainform').delay().animate({
        width: '510px',
        left: '1050'
    }, 600).delay(5000).animate({
        width: '510px',
        left: '',
        right: '1000px'
    }, 200, function () {
        setTimeout(reslide, 3000);
    });
}

这是一个你可以玩的小提琴：http://jsfiddle.net/bv8dwaq2/

【讨论】：