Я хочу знать, как я могу анимировать объект, которому я присвоил случайный идентификатор.
В основном у меня есть кнопка, которая создает "дом" в контейнере. И когда я нажимаю, чтобы создать дом, он будет прикрепляться к моему контейнеру со случайным идентификатором и набором CLASS:
$('.Container').append('<div id="'+iRandomId+'" class="House" title="'+sName+'"></div>');
Случайный идентификатор я получаю вот так:
var iRandomId = GetRandomNumber(999999, 99999999999);
oObject.setId(iRandomId);
function GetRandomNumber(iMinNumber, iMaxNumber)
{
return Math.floor(Math.random()* iMaxNumber +iMinNumber);
}
Анимация: я могу легко анимировать объект, вызвав класс. Но если я создам более одного Дома, они, конечно, все оживут.
setTimeout(function(){
$('.House').effect('bounce');
}, 0, function(){
Аннуляция запускается, когда другой объект перетаскивается поверх моего дома (который недоступен). Что мне нужно для моего jQuery, так это проверить идентификатор конкретного дома, на который объект перетаскивается. А потом только оживите этот дом.
Предполагая, что jQuery UI droppable
или подобен, он запускает событие drop
с this
как droppable, когда происходит падение, поэтому внутри обработчика события:
$(this).effect('bounce');
Живой пример | Live Source (приведенный ниже)
Если это единственная причина, по которой вы используете id
, вы можете прекратить использование id
. Если это не так, тогда вы должны исправить свой код, чтобы в итоге не осталось двух элементов с одним и тем же id
(так как это вполне разумно - и случайным - для того, чтобы ваша функция возвращала 42
дважды подряд). Самый простой способ - иметь начальную точку и просто увеличивать на единицу каждый раз, когда вы ее используете.
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 the blue squares into the rectangles, which
will 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();