jquery动画和绑定

我有一些jQuery，它动态地创建一个span元素，该元素具有css定义的特定形状。span元素在屏幕上随机的x，y位置生成，我已经用class=“.drawingpix”定义了它们。新的跨度图元与上一个相同，只是其位置每隔一两秒创建一次。我希望能够在单击时设置元素的动画。到目前为止，我只能在单击主体时设置所有元素的动画

我希望发生的事情：我希望在触摸或单击元素时设置该元素的动画，并且仅设置该元素的动画

这对我来说什么都没有：

    $('.drawingpix').click(function () {
    // this is the dom element clicked?????
    var element = this;
    $(this).animate({
        height:'250px',
        width:'250px',
        'border-radius':'250px',
        '-moz-border-radius': '250px',
        '-webkit-border-radius': '250px',
        opacity: -0.2,
            }, 3000).fadeOut(0);    
});

当在身体中时，这会使用类“drawingpix”设置每个元素的动画，但在头部时不会设置任何动画：

    $('body').click(function () {
    // this is the dom element clicked?????
    var element = this;
    $('.drawingpix').animate({
        height:'250px',
        width:'250px',
        'border-radius':'250px',
        '-moz-border-radius': '250px',
        '-webkit-border-radius': '250px',
        opacity: -0.2,
            }, 3000).fadeOut(0);    
});

我不熟悉jquery和javascript。在我发布到这里之前，我已经做了几个小时的搜索和尝试

---

我想我需要了解如何获取我单击的元素的索引，并根据索引指定要设置动画的元素。任何帮助都将不胜感激。谢谢

为什么不尝试委派事件，看看这种方法是否适用于新创建的元素

 $('body').on('click', '.drawingpix' ,function () {
    // this is the dom element clicked?????
    var element = this;
    $(this).animate({
        height:'250px',
        width:'250px',
        'border-radius':'250px',
        '-moz-border-radius': '250px',
        '-webkit-border-radius': '250px',
        opacity: -0.2,
            }, 3000).fadeOut(0);    
});

---

我怀疑您遇到了一个几乎所有jQuery新用户都能体验到的问题。对于大多数事件处理程序，如

click（）

，您必须等待DOM准备就绪。jQuery通过函数使这变得非常轻松。该函数希望您向它传递一个函数，其中包含希望在DOM就绪后调用的代码。例如，您的代码如下所示：

jQuery.ready(function(){
    $('.drawingpix').click(function(){
        // this is the dom element clicked?????
        var element = this;
        $(this).animate({
            height:'250px',
            width:'250px',
            'border-radius':'250px',
            '-moz-border-radius': '250px',
            '-webkit-border-radius': '250px',
            opacity: -0.2,
        }, 3000).fadeOut(0);
    });
});

---

您的

单击

处理程序的内容没有问题；它应该只适用于被单击的元素。但是，在动态创建元素时，您必须注意一些细微之处。设置处理程序时，它们仅应用于DOM中当前的对象。如果在此之后创建新元素，它们将没有单击处理程序，这可能是您遇到的问题

jQuery有一个解决方案：。这不仅会为DOM中当前的元素附加处理程序，还会在将来将其附加到所有匹配的元素。所以这正是你需要的。您只需修改代码，如下所示：

$('.drawingpix').live('click',function () {
    $(this).animate({
        height:'250px',
        width:'250px',
        'border-radius':'250px',
        '-moz-border-radius': '250px',
        '-webkit-border-radius': '250px',
        opacity: -0.2,
        }, 3000).fadeOut(0);    
});

---

这里有一个实用的jsFiddle:

非常感谢。这很有效，我现在正在学习授权。再次感谢！