JQuery 幻灯片效果的单击鼠标离开事件

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>

JQuery 幻灯片效果的单击鼠标离开事件

Click-Mouse Leave Event for a JQuery Slide Effect

jquery

jquery-effects

jquery-click-event