図のキャプションは

Question

は、私はあなたが上記の私のjqueryのを見た場合、私はshowとhidefigcaptionしたいので、このスクリプトを

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

を持っているアニメーション。表示と非表示はシンプルですが、今はの中に animate.cssを使用します。

私のスクリプトからは、ZoomOutLeftの作業部のみですので、zoomInUpのアニメーションが表示されません。どうすればこの問題を解決できますか？事前に感謝し、私の悪い英語のために申し訳ありません。

Answer 1

Animate.cssは、要素を単独で表示/非表示にします。 jQueryの表示/非表示を使用している場合、Animate.cssのスタイルルールと競合します（jQueryのshow/hideはanimate.cssのスタイルルールよりも優先度の高い独自の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>