尝试使用 JavaScript 使用 onClick 为元素设置动画 [关闭]答案

【问题标题】：Trying to animate an element with onClick using JavaScript [closed]尝试使用 JavaScript 使用 onClick 为元素设置动画 [关闭]
【发布时间】：2014-12-02 15:18:31
【问题描述】：

我希望这个 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 -->

请查看我的网站以查看示例

http://mast.salemstate.edu/itc18244/Portfolio/

$('.Thumbnails a').on('click', function(e){
    var parent = $(this).parent();
    var animationName = parent.data('animation') || 'animated pulse';

    parent.addClass(animationName).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        parent.removeClass(animationName);
    });

【问题讨论】：

您发布的代码（以及实时网站上）出现 javascript 错误。 on 事件处理程序未使用 }); 正确关闭，您不应在 one 事件处理程序之后使用 ;。
他的问题是“为什么这段代码不起作用”？
prntscr.com/5cg5j6 --> 正如 Noah Huppert 所说，您需要正确关闭标签。第 :90 行的第一个错误是指您的点击事件，该事件未正确关闭。 prntscr.com/5cg5s2 。顺便说一句，您有两个错误：首先，您有一个“;”在“{”之后，那么，您没有正确关闭第一个“{”。

标签： javascript jquery html css ajax

【解决方案1】：

是的，没有准备好的文件。请参阅下面的工作演示。您还可以使用 .Thumbnail 类将数据动画添加到您的 div，这样您就可以轻松地使用 HTML 标记修改动画。查看“设计”的不同动画。

您也可以在 jsFiddle here 找到它。

$(function () {
    var animationend = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

    $('.Thumbnails').on('click', function () {
        var $this = $(this);
        var animationName = $this.data('animation') || 'animated bounce' ;
        
        $this.addClass(animationName).one(animationend, function () {;
            $this.removeClass(animationName);
        });
    });
});

@charset"UTF-8";
 #container {
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
}
body {
    /*background-image: url(images/bg.png);*/
    background-repeat: repeat-x;
}
name, h3 {
    color: black;
    padding-left: 5px;
    margin: 0;
}
name {
    font-size: 51px;
}
h3 {
    margin-bottom: 2em;
}
h2 {
    margin-top: 30px;
    margin-bottom: 5px;
}
p {
    font-size: 16px;
    margin: 0 0 0 0;
    max-width: 960px;
}
#float {
    float: left;
    padding-left: 10px;
}
img {
    min-width: 246px;
    float: left;
    margin-right: 2em;
    margin-top: 6px;
    margin-left: 1em;
}
/*-----------------------*/

/* Navigation */
 .nav {
    height:auto;
    margin: 0 .3em 0 0;
    display:inline;
    display:inline-block;
}
/* specifying the nav list horizontal */
 .nav li {
    display: inline;
    font-size:16px;
    padding: 0 0 0 15.8em;
}
.nav a {
    text-decoration: none;
    display: inline-block;
}
/* ---------------------------- */

/* Designs_Drawings Div ------ */
 #content .Designs_Drawings {
    width: 680px;
    height: 160px;
    margin: 8em auto 3em auto;
}
#content .Designs {
    background-color: #CCC;
    border-style: solid;
    border-width: 2px;
    width: 230px;
    height: 150px;
    border-radius: 1em;
    -ms-transform: rotate(-10deg);
    /* IE 9 */
    -webkit-transform: rotate(-10deg);
    /* Chrome, Safari, Opera */
    transform: rotate(-10deg);
    float: left;
    display: inline-block;
}
#content .Designs p {
    text-align: right;
    /* Top,Right,Down,Left */
    margin: .5em 1em 0 0;
}
#content .Designs .Thumbnails {
    width: 143px;
    height: 95px;
    background-color: blue;
    /* Give thumb div Border/position */
    border-style: solid;
    border-width: 1px;
    /*---------------------*/
    /* Top,Right,Down,Left */
    margin: .5em 0 0 1em;
    /* Curves div Corners */
    border-radius: 1em;
}
/* Drawings Div ------ */
 #content .Drawings {
    background-color: #CCC;
    border-style: solid;
    border-width: 2px;
    width: 230px;
    height: 150px;
    border-radius: 1em;
    -ms-transform: rotate(-350deg);
    /* IE 9 */
    -webkit-transform: rotate(-350deg);
    /* Chrome, Safari, Opera */
    transform: rotate(-350deg);
    float: right;
    display: inline-block;
}
#content .Drawings p {
    text-align: right;
    /* Top,Right,Down,Left */
    margin: .5em 1em 0 0;
}
#content .Drawings .Thumbnails {
    width: 143px;
    height: 95px;
    /* Give div Border */
    border-style: solid;
    border-width: 1px;
    margin: .5em 0 0 1em;
    /* Curves div Corners */
    border-radius: 1em;
}
/* End Designs_Drawings Div */

/* -------------------------*/

/* Photography_WebSites Div */
 #content .Photography_WebSites {
    width: 680px;
    height: 160px;
    margin: 0 auto 4em auto;
}
/* Photography Div ----- */
 #content .Photography {
    background-color: #CCC;
    border-style: solid;
    border-width: 2px;
    width: 230px;
    height: 150px;
    border-radius: 1em;
    -ms-transform: rotate(350deg);
    /* IE 9 */
    -webkit-transform: rotate(350deg);
    /* Chrome, Safari, Opera */
    transform: rotate(350deg);
    float: right;
    display: inline-block;
}
#content .Photography p {
    text-align: right;
    /* Top,Right,Down,Left */
    margin: .5em 1em 0 0;
}
#content .Photography .Thumbnails {
    width: 143px;
    height: 95px;
    /* Give thumb div Border/position */
    border-style: solid;
    border-width: 1px;
    /*---------------------*/
    /* Top,Right,Down,Left */
    margin: .5em 0 0 1em;
    /* Curves div Corners */
    border-radius: 1em;
}
/* Web Sites Div ------ */
 #content .WebSites {
    background-color: #CCC;
    border-style: solid;
    border-width: 2px;
    width: 230px;
    height: 150px;
    border-radius: 1em;
    -ms-transform: rotate(10deg);
    /* IE 9 */
    -webkit-transform: rotate(10deg);
    /* Chrome, Safari, Opera */
    transform: rotate(10deg);
    float: left;
    display: inline-block;
}
#content .WebSites p {
    text-align: right;
    /* Top,Right,Down,Left */
    margin: .5em 1em 0 0;
}
#content .WebSites .Thumbnails {
    width: 143px;
    height: 95px;
    /* Give div Border */
    border-style: solid;
    border-width: 1px;
    margin: .5em 0 0 1em;
    /* Curves div Corners */
    border-radius: 1em;
}
/* --------------------*/

/* Big Box Div --------*/
 #content .big_box {
    background-color: #CCC;
    margin: 1em auto 4em auto;
    width: 690px;
    height: 483px;
    position:relative;
    /* Curves div Corners */
    border-radius: 1em;
    /* Give div Border */
    border-style: solid;
    border-width: 1px;
}
#content .big_box img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
}
/* ------ */

/* Footer */
 .footer {
    height: auto;
    margin: 0;
    display:inline;
    display:inline-block;
    width: 100%;
}
.footer .info {
    margin: 0;
    text-align: center;
}
.footer .info li + li::before {
    content:" | ";
    display: inline-block;
    margin-left: .5em;
    margin-right: .5em;
}
/* specifying the nav list horizontal */
 .footer li {
    display: inline;
    font-size:12px;
    text-align: center;
}
.footer a {
    text-decoration: none;
    display: inline-block;
}
.footer .info img {
    width: 8px;
    height: 8px;
}

<link href="http://cdn.jsdelivr.net/animatecss/3.2.0/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div id="content">
        <div class="Designs_Drawings">
            <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" /></a>
						 <a href="images/Halloween/frankenstein.png"><img src="images/Halloween/frankenstein_sm.png" /></a> -->
                </div>
            </div>
            <!-- End Designs -->
            <div class="Drawings">
                <p>Drawings</p>
                <div class="Thumbnails" data-animation="animated bounce"></div>
            </div>
            <!-- End Drawings -->
        </div>
        <!-- End Designs_Drawings -->
        <div class="Photography_WebSites">
            <div class="Photography">
                <p>Photography</p>
                <div class="Thumbnails" data-animation="animated bounce"></div>
            </div>
            <!-- End Photography -->
            <div class="WebSites">
                <p>Web Sites</p>
                <div class="Thumbnails" data-animation="animated bounce"></div>
            </div>
            <!-- End WebSites -->
        </div>
        <!-- End Photography_WebSites -->
    </div>
</div>

【讨论】：

就是这样！非常感谢！

【解决方案2】：

您需要等到document is ready。像这样包装你的代码：

<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 错误，因为您缺少 }); 来关闭回调。

【讨论】：

不知道为什么这被否决了，它有效。