그림 캡션

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>

이 애니메이션. 표시 및 숨기기는 간단하지만 지금은 hover event 안에 animate.css을 사용하고 싶습니다.

내 스크립트에서 작동 부분은 ZoomOutLeft이므로 zoomInUp 애니메이션을 볼 수 없습니다. 어떻게 해결할 수 있을까요? 사전에 감사하고 나의 나쁜 영어에 대해 유감스럽게 생각한다.

Answer 1

Animate.css은 요소를 숨기거나 표시합니다. jQuery의 show/hide를 사용하면 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>