必须更改鼠标移出事件中的单击事件

Question

With below script written for click event. I want to use Same code(selectors) for Mouse in, mouse out event

 $('.tools_collapsed').wrap('<div class="newparent" />');
    var speed = 600;
    $('.tools_collapsed').show().css({ right: '-250px' }).hide();
    $('.tools_collapsed .collapse_btn').hide();
    $('.tools_expand').click(function () {
        $('.tools_collapsed').show().animate({ right: '0' }, { duration: speed });
        $('.tools_collapsed .collapse_btn').show();
    })
    $('a.collapsed').click(function () {
        $('.tools_expand').css({ display: 'none' });
        $('.tools_collapsed').animate({ right: '-250', easing: 'easeOutQuad' }, 400, function () {
            $('.tools_collapsed .collapse_btn').css("display", "none");
            $('.tools_expand').show("normal");
        });
    })

}

Answer 1

Try this approach...

function yourFunction(){
   //your code here
}

$("#yourSelector").hover(
    yourFunction(), 
    yourFunction()
);

Answer 2

You can try this:

$('.tools_collapsed').wrap('<div class="newparent" />');
var speed = 600;
$('.tools_collapsed').show().css({ right: '-250px' }).hide();
$('.tools_collapsed .collapse_btn').hide();

$('.tools_expand').on( "mouseenter",function () {
    $('.tools_collapsed').show().animate({ right: '0' }, { duration: speed });
    $('.tools_collapsed .collapse_btn').show();
})

$('.tools_expand').on( "mouseout", function () {      // changed from "a.collapsed"
    $('.tools_expand').css({ display: 'none' });
    $('.tools_collapsed').animate({ right: '-250', easing: 'easeOutQuad' }, 400, function () {
        $('.tools_collapsed .collapse_btn').css("display", "none");
        $('.tools_expand').show("normal");
    });
})