CSS animate Javascript -


i trying install javacript make animation run more once.

i have been given script off animate site have no idea include element want apply animation to.

i wish apply animation 'animated zoomin' both h2 , h3 headings in div class of thumbtitle-box.

here html

div class="imagethumbnailleft">                 <div class="thumbtitle-box"><h2>artful dodger trading company</h2><h3>- illustrated playing card series -</h3></div> 

here css

    .animated {       -webkit-animation-duration: 1s;       animation-duration: 1s;       -webkit-animation-fill-mode: both;       animation-fill-mode: both;     }  @-webkit-keyframes zoomin {   0% {     opacity: 0;     -webkit-transform: scale3d(.3, .3, .3);     transform: scale3d(.3, .3, .3);   }    50% {     opacity: 1;   } }  @keyframes zoomin {   0% {     opacity: 0;     -webkit-transform: scale3d(.3, .3, .3);     transform: scale3d(.3, .3, .3);   }    50% {     opacity: 1;   } }  .zoomin {   -webkit-animation-name: zoomin;   animation-name: zoomin; } 

and java - problem is

$(document).ready(function() {  function animationhover(trigger, element, animation){     element = $(element);     trigger = $(trigger);     trigger.hover(         function() {             element.addclass('animated ' + 'zoomin');                   },         function(){             //wait animation finish before removing classes             window.settimeout( function(){                 element.removeclass('animated ' + animation);             }, 2000);                    }); }  }); 

i new javascript , appreciated. thanks

may looking this:

work h2 , h3 tag under thumbtitle-box class

$(".imagethumbnailleft h2, .imagethumbnailleft h3").hover(function(){ animationhover(this,this,'zoomin'); });

http://jsfiddle.net/a7r95y7x/2/


Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -