Question

我想让这个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);
    });

Answer 1

您需要等到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错误，因为您错过了});来关闭回调。

Answer 2

是的，文件准备就绪了。请参阅下面的工作演示。您还可以使用类.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>

尝试使用JavaScript在onClick上为元素设置动画

2 个答案: