尝试使用JavaScript通过onClick设置元素动画

我希望这个div使用JavaScript在单击时设置动画

    <div class="Designs">

        <p>Designs</p>

            <div class="Thumbnails" data-animation="animated pulse">

                <a href="images/Halloween/bat.png"><img src="images/Halloween/bat_sm.png" width="140" height="82"/></a>

            </div>


    </div> <!-- End Designs -->

---

你需要等到晚上。将代码打包如下：

<script>
    $(function(){
        var animationName = 'animated bounce';
        var animationend = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

        $('.Thumbnails').on('click', function() {
            $('.Thumbnails').addClass(animationName).one(animationend, function () {;
                $(this).removeClass(animationName);
            });
        });
    });
    </script>

---

您还出现了一个JavaScript错误，因为您缺少一个}；关闭回调。

是，缺少“文档准备就绪”。请参阅下面的工作演示。 您还可以使用class.thumboil将数据动画添加到div中，这样您就可以轻松地使用HTML标记修改动画。有关设计，请参见不同的动画

您也可以在JSFIDLE上找到它

$function{ var animationend='webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'； $'.Thumbnails'。单击，函数{ var$this=$this； var animationName=$this.data'animation'| |'animated bounce'； $this.addClassanimationName.oneanimationend，函数{； $this.removeClassanimationName； }; }; }; @charsetUTF-8； 容器{ 最大宽度：960像素； 右边距：自动； 左边距：自动； } 身体{ /*背景图片：urlmages/bg.png*/ 背景重复：重复-x； } 姓名，h3{ 颜色：黑色； 左侧填充：5px； 保证金：0； } 名字{ 字体大小：51px； } h3{ 边缘底部：2米； } 氢{ 边缘顶部：30px； 边缘底部：5px； } p{ 字体大小：16px； 保证金：0； 最大宽度：960像素； } 浮动{ 浮动：左； 左侧填充：10px； } img{ 最小宽度：246px； 浮动：左； 右边距：2米； 边缘顶部：6px； 左边距：1米； } /*------------*/ /*航行*/ .导航{ 高度：自动； 利润率：0.3em0； 显示：内联； 显示：内联块； } /*指定水平导航列表*/ 李国荣先生{ 显示：内联； 字体大小：16px； 填充：0 15.8em； } .导航a{ 文字装饰：无； 显示：内联块； } /* -------------- */ /*设计及绘图部--*/ 内容、设计和图纸{ 宽度：680px； 高度：160px； 保证金：8em自动3em自动； } 内容、设计{ 背景色：CCC； 边框样式：实心； 边框宽度：2倍； 宽度：230px； 高度：150像素； 边界半径：1米； -ms变换：旋转-10度； /*IE 9*/ -webkit变换：旋转-10度； /*铬、狩猎、歌剧*/ 变换：旋转-10度； 浮动：左； 显示：内联块； } 内容设计{ 文本对齐：右对齐； /*上、右、下、左*/ 边距：.5em 1em 0； } 内容、设计、缩略图{ 宽度：143px； 高度：95px； 背景颜色：蓝色； /*给出拇指div边框/位置*/ 边框样式：实心； 边框宽度：1px； /*-----------*/ /*上、右、下、左*/ 边距：.5em 0.1em； /*曲线分割角*/ 边界半径：1米； } /*绘图处--*/ 内容.图纸{ 背景色：CCC； 边框样式：实心； 边框宽度：2倍； 宽度：230px； 高度：150像素； 边界半径：1米； -ms变换：旋转-350度； /*IE 9*/ -webkit变换：旋转-350度； /*铬、狩猎、歌剧*/ 变换：旋转-350度； 浮动：对； 显示：内联块； } 内容.图纸p{ 文本对齐：右对齐； /*上、右、下、左*/ 边距：.5em 1em 0； } 内容。图纸。缩略图{ 宽度：143px； 高度：95px； /*给分区边界*/ 边框样式：实心； 边框宽度：1px； 边距：.5em 0.1em； /*曲线分割角*/ 边界半径：1米； } /*末端设计及绘图组*/ /* -------------*/ /*摄影及网页组*/ 内容.摄影与大学网站{ 宽度：680px； 高度：160px； 保证金：0自动4em自动； } /*摄影组*/ 内容.摄影{ 背景色：CCC； 边框样式：实心； 边框宽度：2倍； 宽度：230px； 高度：150像素； 边界半径：1米； -ms变换：旋转350度； /*IE 9*/ -webkit变换：旋转350度； /*铬、狩猎、歌剧*/ 变换：旋转350度； 浮动：对； 显示：内联块； } 内容.摄影{ 文本对齐：右对齐； /*上、右、下、左*/ 边距：.5em 1em 0； } 内容。摄影。缩略图{ 宽度：143px； 高度：95px； /*给出拇指div边框/位置*/ 边框样式：实心； 边框宽度：1px； /*-----------*/ /*上、右、下、左*/ 边距：.5em 0.1em； /*曲线分割角*/ 边界半径：1米； } /*网站部－*/ 内容.网站{ 背景色：CCC； 边框样式：实心； 边框宽度：2倍； 宽度：230px； 高度：150像素； 边界半径：1米； -ms变换：旋转10度； /*IE 9*/ -webkit变换：旋转10度； /*铬、狩猎、歌剧*/ 变换：旋转10度； 浮动：左； 显示：内联块； } 内容.网站p{ 文本对齐：右对齐； /*上、右、下、左*/ 边距：.5em 1em 0； } 内容、网站、缩略图{ 宽度：143px； 高度：95px； /*给分区边界*/ 边框样式：实心； 边框宽度：1px； 边距：.5em 0.1em； /*曲线分割角*/ 边界半径：1米； } /* ----------*/ /*大箱子----*/ 内容。大盒子{ 背景色：CCC； 保证金：1em自动4em自动； 宽度：690px； 身高：483px； 位置：相对位置； /*曲线分割角*/ 边界半径：1米； /*给分区边界*/ 边框样式：实心； 边框宽度：1px； } 内容。大盒子图片{ 位置：绝对位置； 排名：0； 左：0； 宽度：100%； 高度：自动； } /* --- */ /*页脚*/ .页脚{ 高度：自动； 保证金：0； 显示：内联； 显示：内联块； 宽度：100%； } .footer.info{ 保证金：0； 文本对齐：居中； } .footer.info li+li:：before{ 内容:|； 显示：内联块； 左侧边缘：.5em； 右边距：.5em； } /*指定水平导航列表*/ 李先生{ 显示：内联； 字体大小：12px； 文本对齐：居中； } .页脚a{ 文字装饰：无； 显示：内联块； } .footer.info img{ 宽度：8px； 高度：8px； } 设计

图纸

摄影

网站

---

您发布的代码和live站点上出现javascript错误。on事件处理程序未使用}正确关闭；而且你不应该有这种感觉；在一个事件处理程序之后。他的问题是为什么这个代码不起作用？->正如Noah Huppert所说，您需要正确关闭标签。第90行的第一个错误正好与未正确关闭的单击事件有关。顺便说一下，你有两个错误：第一，你有一个错误；在{之后，那么，你没有正确地关闭第一个{。不确定为什么这被否决，它是有效的。就是这样！非常感谢！

<script>
    $(function(){
        var animationName = 'animated bounce';
        var animationend = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

        $('.Thumbnails').on('click', function() {
            $('.Thumbnails').addClass(animationName).one(animationend, function () {;
                $(this).removeClass(animationName);
            });
        });
    });
    </script>