Question

我有这个脚本

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

从我的脚本中，工作部分仅在ZoomOutLeft中，因此我无法看到zoomInUp动画。那怎么能解决这个问题呢？提前谢谢，抱歉我的英语不好。

Answer 1

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

在下面的更新代码段中，我只删除了jQuery show / hide行。

此外，一旦你添加了一个类，例如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>

图标题动画

1 个答案: