javascript - jquery div animate right and after pauze animate left -

javascript - jquery div animate right and after pauze animate left -

im seek slide div left right after clicking button submit, give little pauze , div automaticaly slide left

now have done slide right..

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

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>

css

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

when give feedback user after/before submiting, seek utilize css3 transform instead of moving/resizing object.

function slide($obj) { // jquery object of element $obj.css("transform", "translatex (50px)"); settimeout(function(){ $obj.css("transform", "none"); }, 5000); }

to create smooth (real animation) apply css3 transition property.

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

or can shorten, if you're sure everything'd go smoothly.

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

ps; in expirience jquery.delay(); wasn't working queueing animations, i'm not exclusively sure why. matter of fact, happened sometimes. tought wasn't working

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

javascript jquery html css animation