CSS 动画 Javascript

Question

我正在尝试安装一些 Javacript 来让我的动画运行不止一次。

我从动画网站获得了这个脚本，但不知道在哪里实际包含我希望它应用动画的元素。

我希望将动画 'animated zoomIn' 应用到 h2 和 h3 标题中，这些标题位于带有 thumbtitle-box 类的 div 中。

这是我的html：

div class="imagethumbnailleft">
                <div class="thumbtitle-box"><h2>ARTFUL DODGER TRADING COMPANY</h2><h3>- Illustrated playing card series -</h3></div>

这是我的 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;
}

还有 Javascript - 这就是问题所在：

$(document).ready(function() {

function animationHover(trigger, element, animation){
    element = $(element);
    trigger = $(trigger);
    trigger.hover(
        function() {
            element.addClass('animated ' + 'zoomIn');          
        },
        function(){
            //wait for animation to finish before removing classes
            window.setTimeout( function(){
                element.removeClass('animated ' + animation);
            }, 2000);           
        });
}

});

我是 Javascript 的新手，任何帮助将不胜感激。

Answer 1

也许你正在寻找这个：

在 thumbtitle-box 类下为 h2 和 h3 标签工作

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

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