Jquery单击“显示鼠标隐藏侧栏”
Jquery单击“显示鼠标隐藏侧栏”
提问于 2015-01-17 05:32:30
嗨，我需要一些这个脚本，我设法用鼠标显示面板，但是我想当我的鼠标离开面板时，它会关闭它，这是示例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');
}
});
});回答 4
Stack Overflow用户
回答已采纳
发布于 2015-01-17 06:48:59
在这里，您需要编写两个方法。
jQuery click在单击箭头时显示该节，jQuery onmouseleave在退出该节时隐藏该节。
我建议您以(背景样式) slideopen.png CSS显示与类相关的slideclose.png和文件。
方法1：on click
jQuery代码：
$('.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');
}
});方法2：on 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/
Stack Overflow用户
发布于 2015-01-17 06:17:09
您可以做的是添加一个分离的mouseout函数，如本小提琴所示。您的代码的问题是，mouseover事件只在.slider-arrow上运行一次，将类更改为hide，然后期望另一个mouseover读取它需要隐藏的内容。
$(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');
}
});
});希望这有意义。
Stack Overflow用户
发布于 2015-01-17 06:26:17
您可以使用mouseout或mouseleave。我想您会在panel中添加一些元素。因此，mouseout在指针移出子元素时触发，而mouseleave只在指针移出绑定元素时触发。
$('.panel').mouseleave(function() {
if($('.slider-arrow').hasClass('hide')){
$( ".slider-arrow, .panel" ).animate({
right: "-=300"
}, 700);
$('.slider-arrow').html('»').removeClass('hide').addClass('show');
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27996502
复制相关文章
相似问题
腾讯云开发者
