をクリックし、マウスを残すイベントのスライドエフェクト

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>