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动画从左到右并在暂停后回来

回答

相关问题