嘗試使用JavaScript使用onClick設置動畫元素

-3

我希望此div能夠使用JavaScript進行點擊動畫。嘗試使用JavaScript使用onClick設置動畫元素

<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); 
    });

來源

2014-12-02 Mike Perham

你有JavaScript錯誤你發佈代碼（在活動站點）。 'on'事件處理程序沒有用'}）;'正確關閉，你不應該在'one'事件處理程序後面有';'。 – Pat 2014-12-02 15:22:50

他的問題是「爲什麼這個代碼不工作」？ – 2014-12-02 15:23:02

http://prntscr.com/5cg5j6 - >正如Noah Huppert所說，您需要正確關閉您的標籤。第90行中的第一個錯誤指的是您的點擊事件，該事件沒有正確關閉。 http://prntscr.com/5cg5s2。順便說一句，你有兩個錯誤：首先，你有一個「;」在「{」之後，然後，您不會正確關閉第一個「{」。 – briosheje 2014-12-02 15:25:44

是的，文件準備失蹤。請參閱下面的工作演示。您還可以使用class .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> 
 
\t \t \t \t \t \t <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>

來源

2014-12-02 15:57:25 AWolf

就是這樣！非常感謝！ – 2014-12-02 16:34:20

你需要等到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錯誤，因爲你錯過了});關閉回調。

來源

2014-12-02 15:28:37 pmahomme

不知道爲什麼這是downvoted，它的工作原理。 – pmahomme 2014-12-02 15:42:21

嘗試使用JavaScript使用onClick設置動畫元素

回答

相關問題