javascript - jQuery - Animate object that has been given a random id -
i want know how can animate object have assigned random id to.
basically have button creates "house" in container. , when click create house, append container random id , set class:
$('.container').append('<div id="'+irandomid+'" class="house" title="'+sname+'"></div>');
the random id this:
var irandomid = getrandomnumber(999999, 99999999999); oobject.setid(irandomid); function getrandomnumber(iminnumber, imaxnumber) { return math.floor(math.random()* imaxnumber +iminnumber); }
animation: can animate object calling class. if create more 1 house of course animate..
settimeout(function(){ $('.house').effect('bounce'); }, 0, function(){
the annimation triggered when object dragged on top of house (which droppable). need jquery somehow check id of specific house object dragged on to. , animate house.
assuming jquery ui's droppable
or similar, triggers drop
event this
droppable when drop occurs, within event handler:
$(this).effect('bounce');
live example | live source (quoted inline below)
if reason you're using id
, can stop using id
. if isn't, should fix code it's not possible end 2 elements same id
(since it's reasonable — , random — function return 42
twice in row). easiest way have starting point , increment 1 each time use it.
css:
.dropzone { width: 400px; height: 50px; border: 1px solid black; } .dragme { width: 20px; height: 20px; background-color: blue; margin: 2px; cursor: pointer; }
html:
<p>drag blue squares rectangles, turn yellow briefly on drop.</p> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dragme"></div> <div class="dragme"></div> <div class="dragme"></div>
javascript:
$(".dropzone").droppable({ drop: function() { var $this = $(this); $this.css("background-color", "yellow"); settimeout(function() { $this.css("background-color", ""); }, 500); } }); $(".dragme").draggable();
Comments
Post a Comment