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

＆＃13;

$(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");
          });
        });
      });
    }
  });
});

＆＃13;

<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>

＆＃13;

用于JQuery幻灯片效果的Click-Mouse Leave事件

1 个答案: