图标题动画

Question

我有这个脚本

 $(document).ready(function() { 
    $('.profilecaption').hide();
    
           $('.profileimg').hover(
           function() {
             $(this).find('figcaption').show();
             $(this).find('figcaption').addClass('animated zoomInUp');
          },
           function() {
            $(this).find('figcaption').addClass('animated zoomOutLeft');
              $(this).find('figcaption').hide();
          });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

 <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  
  
<figure class="profileimg d-inline-block">
                    <img class="img-thumbnail" src="http://via.placeholder.com/200x200?text=1">
                    <figcaption class="profilecaption"><p>1</p></figcaption>
                </figure>
                
                <figure class="profileimg d-inline-block">
                    <img class="img-thumbnail" src="http://via.placeholder.com/200x200?text=2">
                    <figcaption class="profilecaption"><p>2</p></figcaption>
                </figure>

所以，如果您在上面看到我的 jquery，我想 show 和 hide figcaption。显示和隐藏很简单，但现在我想在hover event 中使用animate.css。

从我的脚本来看，工作部分只在ZoomOutLeft，所以我看不到zoomInUp 动画。那么我该如何解决呢？提前感谢，对不起我的英语不好。

Answer 1

Animate.css 自己负责隐藏/显示元素。使用 jQuery 的 show/hide 时，会与 Animate.css 的样式规则冲突（因为 jQuery 的 show/hide 添加了自己的 css 规则，其优先级高于 animate.css 的样式规则）。

在下面更新的 sn-p 中，我只删除了 jQuery 显示/隐藏行。

此外，一旦您添加了一个类，例如zoomInUp，那么您也需要将其删除，以便当用户再次将鼠标悬停在其上时，该类将再次添加，您可以再次看到动画。希望，这是有道理的。

$(document).ready(function() { 
    //$('.profilecaption').hide();
    
           $('.profileimg').hover(
           function() {
             //$(this).find('figcaption').show();
             $(this).find('figcaption').removeClass("zoomOutLeft").delay(500).addClass('animated zoomInUp');
          },
           function() {
            $(this).find('figcaption').removeClass("zoomInUp").addClass('animated zoomOutLeft');
              //$(this).find('figcaption').hide();
          });
 });

.as-console-wrapper{ display: none !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

 <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  
  
<figure class="profileimg d-inline-block">
                    <img class="img-thumbnail" src="http://via.placeholder.com/200x200?text=1">
                    <figcaption class="profilecaption"><p>1</p></figcaption>
                </figure>
                
                <figure class="profileimg d-inline-block">
                    <img class="img-thumbnail" src="http://via.placeholder.com/200x200?text=2">
                    <figcaption class="profilecaption"><p>2</p></figcaption>
                </figure>