클릭 - 마우스 휴가 이벤트 밀어 효과

Question

난 그냥 JQuery와 내용을 시작하고 다음과 같은 효과 도움을 사용할 수

:

위시리스트 : 사용자가 ".blue_box"를 클릭 슬라이드 효과가 있습니다 (요소가 위로 이동하여 정보를 나타냅니다). 사용자가 ".blue_box"에서 마우스를 움직이면 다른 슬라이드 효과 (슬라이드 된 요소가 이전 위치로 다시 슬라이드됩니다)가 나타납니다.

현재 상태 : 내 코드에는 슬라이드 업 및 슬라이드 다운 효과 모두에 대한 클릭 이벤트가 있습니다. 당신이 제공 할 수있는 모든 도움에 미리

JQuery와

<script> 
    $(document).ready(function() { 
    $('.blue_box').click(function(){ 
     $('.caption',this).slideToggle('slow'); 
      }, function(){ 
    $('.caption',this).slideToggle('slow'); 
     }); 
    }); 
</script> 

HTML

<div class="dyslexia_link img_frame col span_4"> 
     <div class="blue_box"> 
      <h3>What is Dyslexia</h3> 
      <div class="caption"> 
      <p>Dyslexia is a medical problem with an educational solution. By providing a style 
       of teaching that meets the unique learning needs of students with dyslexia, these 
       bright children can go on to achieve their highest academic potential.</p> 
      <a href= "http://riversideschool.rpmdevserver.com/what-is-dyslexia/"><h2 class="learn_btn_home">LEARN MORE</h2></a> 
      </div> 
     </div> 
    </div> 

감사합니다!

Answer 1

당신은 mouseleave

$(document).ready(function() { 
 
    var blue_box = $('.blue_box'), 
 
     caption = $('.caption'); 
 
    //hidden at first 
 
    caption.hide(); 
 
    blue_box.click(function() { 
 
    //only if it is hidden, you can remove it 
 
    if (!(caption.is(":visible"))) { 
 
     $('.caption', this).slideToggle('slow', function() { 
 
     //when you complete the opening animation add the closing event 
 
     blue_box.on("mouseleave", function() { 
 
      $('.caption', this).slideToggle('slow', function() { 
 
      blue_box.off("mouseleave"); 
 
      }); 
 
     }); 
 
     }); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dyslexia_link img_frame col span_4"> 
 
     <div class="blue_box"> 
 
      <h3>What is Dyslexia</h3> 
 
      <div class="caption"> 
 
      <p>Dyslexia is a medical problem with an educational solution. By providing a style 
 
       of teaching that meets the unique learning needs of students with dyslexia, these 
 
       bright children can go on to achieve their highest academic potential.</p> 
 
      <a href= "http://riversideschool.rpmdevserver.com/what-is-dyslexia/"><h2 class="learn_btn_home">LEARN MORE</h2></a> 
 
      </div> 
 
     </div> 
 
    </div>