0

我想知道如何为分配了随机 ID 的对象设置动画。

基本上我有一个在容器中创建“房子”的按钮。当我点击创建房子时，它会附加到我的容器中，并带有一个随机 ID 和一个设置的 CLASS：

$('.Container').append('<div id="'+iRandomId+'" class="House" title="'+sName+'"></div>');

我得到的随机 ID 是这样的：

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 需要以某种方式检查对象被拖到的特定房屋的 ID。然后只为那个房子设置动画。

4

1 回答 1

1

假设 jQuery UIdroppable或类似的，它会在 drop 发生时触发一个作为 droppable 的drop事件this，因此在事件处理程序中：

$(this).effect('bounce');

实例| 实时源（以下内联引用）

如果这是您使用 的唯一原因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();
于 2013-09-24T16:06:56.447 回答