javascript - jQuery div 从左到右动画并在暂停后返回

Question

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

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>

JS

  $(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);
            });
});

Answer 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)");
}

---

附言；在我的经验中，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);