javascript - jQuery: How to change the position of a div, inside of another div then create a glide effect? -

javascript - jQuery: How to change the position of a div, inside of another div then create a glide effect? -

i have div, , using css create in shape of reddish box, id of #box. create neat set #box within of div. know how can alter position of #box somewhere else on screen (lets top left), have glide bottom right of screen.

$(document).ready(function(){ /*limits glide*/ var top_limit = "10px"; var left_limit = "10px"; var right_limit = "600px"; var bottom_limit = "600px"; /*glide*/ $('#glide').click(function(){ $('#box').css("left",left_limit).css("top",top_limit); $('#box').animate({"left": right_limit, "top": bottom_limit},2000); }); });

as divs have multiple things on html file main ones these.

.subdiv { width: 600px; height: 250px; margin: 0 auto; padding: 10px; background-color: #876d52; border: 3px solid white; } #box{ width: 250px; height: 200px; background: #ff9933; margin: 0 auto; }

if talking "on screen" , not dom positioning, can utilize position: absolute , set left: 0 - position "div" in question far left of screen. animate left property create have "glide" effect..

you have careful though. it's not practice take items out of parent containers "visually" leave them same in dom, because gets confusing. (oh in source code that's kid of container on screen doesnt appear way)

i hope makes sense, allow me know if questions.

javascript jquery html css