Question

嗨我需要一些这个脚本我设法用鼠标点击显示面板但我想当我的鼠标离开面板它将关闭它这是样本http://jsfiddle.net/jikey/w9s7pt25/

$(function(){
    $('.slider-arrow').click(function(){
        if($(this).hasClass('show'))
        {
            $( ".slider-arrow, .spanel" ).animate({
                right: "+=182"
            }, 700, function() {
                // Animation complete.
            });
            $(this).html('<img src="images/sideclose.png" />').removeClass('show').addClass('hide');
        }
        else 
        {      
            $( ".slider-arrow, .spanel" ).animate({
                right: "-=182"
            }, 700, function() {
                // Animation complete.
            });
            $(this).html('<img src="images/sideopen.png" />').removeClass('hide').addClass('show');    
        }
    });
});

Answer 1

你可以做的是添加一个单独的mouseout功能，如jsfiddle所示。您的代码的问题是mouseover事件仅在.slider-arrow上执行一次，将类更改为hide，然后期望另一个鼠标悬停读取它需要隐藏。

$(function () {
    $('.slider-arrow').mouseover(function () {
        if ($(this).hasClass('show')) {
            $(".slider-arrow, .panel").animate({
                right: "+=300"
            }, 700, function () {
                // Animation complete.
            });
            $(this).html('&laquo;').removeClass('show').addClass('hide');
        }

    });

    $('.panel').mouseout(function () {
        if ($('.slider-arrow').hasClass('hide')) {
            $(".slider-arrow, .panel").animate({
                right: "-=300"
            }, 700, function () {
                // Animation complete.
            });
            $('.slider-arrow').html('&raquo;').removeClass('hide').addClass('show');
        }
    });
});

希望它有意义。

Answer 2

您可以使用mouseout或mouseleave。我想你会在panel中添加一些元素。所以mouseout在指针移出子元素时触发，而mouseleave仅在指针移出绑定元素时触发

 $('.panel').mouseleave(function() {   
     if($('.slider-arrow').hasClass('hide')){
         $( ".slider-arrow, .panel" ).animate({
            right: "-=300"
         }, 700);
         $('.slider-arrow').html('&raquo').removeClass('hide').addClass('show');     
     }
   });

Answer 3

您可以在面板上附加jquery .mouseleave()功能，只有在面板可见时才执行该功能，还可以添加类似“可见”的类，以保持面板的可见性状态，如下所示：{{3 }}

    $('.panel').on('mouseleave',function(){
    if($(this).hasClass('visible')){
        $( ".slider-arrow, .panel" ).animate({
      right: "-=300"
      }, 700, function() {
        // Animation complete.
      });
    $('.slider-arrow').html('&raquo;').removeClass('hide').addClass('show');
    $('.panel').removeClass('visible');
   }
});

Answer 4

在这里你需要编写2种方法。

jQuery click显示关于点击箭头的部分和jQuery onmouseleave以隐藏部分出来的部分。

我建议您在（背景样式） CSS 中显示与类相关的slideopen.png和slideclose.png文件。

方法1 ：在click

上

jQuery代码：

$('.slider-arrow').on("click", function(){
       if($(this).hasClass('show')){
        $( ".slider-arrow, .panel" ).animate({
          right: "+=300"
          }, 700, function() {
            // Animation complete.
          });     $(this).html('&laquo;').removeClass('show').addClass('hide');
        }
});

方法2 ：mouse leave

jQuery代码：

$(".panel").on("mouseleave", function(){
        if(!$('.slider-arrow.show').hasClass('show')) {
        $( ".slider-arrow, .panel" ).animate({
          right: "-=300"
          }, 700, function() {
            // Animation complete.
          });

          $(".slider-arrow").removeClass('hide').addClass('show');   
        }
 });

演示链接：http://jsfiddle.net/w9s7pt25/7/

Jquery点击show mouseleave hide sidebar

4 个答案: