jQuery div動畫從左到右並在暫停後回來

我試圖在點擊「提交」按鈕時從左側滑動div到右側。稍微暫停後，div會自動滑回到原來的位置。目前它走向右側，但不會回到左側角落。jQuery 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); 
      }); 
});

來源

2014-10-19 user3447137

當您反饋給用戶後/ submiting之前，嘗試使用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);

來源

2014-10-19 19:48:28 Danon

它不工作的原因是，當你添加right的元素，你還留着left，其原有的價值，因此元素不會「回來」。添加left: '',到第2 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/

來源

2014-10-19 19:49:04 webeno

jQuery div動畫從左到右並在暫停後回來

回答

相關問題