圖字幕動畫

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的顯示/隱藏添加了他們自己的css規則，它們的優先級高於animate.css的樣式規則）。

在下面更新的代碼片段中，我只刪除了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>