Click-Mouse Leave Event for a JQuery Slide Effect

Question

I'm just starting to learn JQuery and could use some help with the following effect:

Wish List: When the user clicks on ".blue_box" there is a slide effect (element slides upward to reveal information). When the user move the mouse off of ".blue_box" there is another slide effect (element that slid up now slides back down to previous position).

Current Status: My code has a click event for both the slide up and slide down effect.

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>

Thanks in advance for any help you can provide!

Answer 1

you should put 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>