Question

当我提交＆＃39;时，我试图将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>

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

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);

Answer 2

它不起作用的原因是，当您向元素添加right时，您还会将left保留为其原始值，因此该元素将不会出现背面＆＃34 ;.将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/

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

2 个答案: