Jquery on click show mouseleave hide sidebar

Question

Hi i need some with the this script i manage to show the panel with the mouseclick but i wanted when my mouse leave the panel it will close it this is the sample 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

What you can do is add a seperate mouseout function as illustrated in this jsfiddle . The problem with your code was that the mouseover event only acts on .slider-arrow once, changes the class to hide and then expects another mouseover to read that it needs to be hidden.

$(function () {
    $('.slider-arrow').mouseover(function () {
        if ($(this).hasClass('show')) {
            $(".slider-arrow, .panel").animate({
                right: "+=300"
            }, 700, function () {
                // Animation complete.
            });
            $(this).html('«').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('»').removeClass('hide').addClass('show');
        }
    });
});

Hope it makes sense.

Answer 2

You can use mouseout or mouseleave . I guess you would add some elements in panel . So mouseout fires when the pointer moves out of child element as well, while mouseleave fires only when the pointer moves out of the bound element

 $('.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

You can attach the jquery .mouseleave() function on the panel and let it execute only when the panel is visible also add a class like 'visible' to keep state of the visibility of your panel like so: http://jsfiddle.net/gakuru/d2qnrm2x/

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

Answer 4

Here you need to write 2 methods.

jQuery click to display the section on clicking on the arrow and jQuery onmouseleave to hide the section on coming out of the section.

I suggest you to display the slideopen.png and slideclose.png files in the (background style) CSS with respect to the classes.

Method 1 : on click

jQuery Code:

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

Method 2 : on mouse leave

jQuery Code:

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

Demo link : http://jsfiddle.net/w9s7pt25/7/