如何将jQuery的“切换”功能分解为独立的“显示”和“隐藏”功能？

Question

我有切换一个div宽度的功能，因此具有“滑动”的appearence从屏幕的边界之外

$(".slider").animate({ 
    width: "toggle", 
}, 300, function() { 
}); 

有没有一种办法可以分成两个不同的功能，这，一个显示div和一个隐藏它？

因此，理想情况下，如果我已经显示div触发show函数，则不会发生任何事情，反之亦然。

我做了一个小提琴来说明我想要做什么：http://jsfiddle.net/2x816nmf/1/。所以在小提琴中的问题是.hide-slider和.show-slider只是简单地切换宽度。 .hide-slider应该只有设置为.slider's宽度为0,.show-slider应该只有设置宽度为在CSS中定义的数量。如果我连续按两个按钮，就不会发生任何事情。

Answer 1

你可以只添加检查一切布尔变量：

show = true; 

$('.show-slider').click(function() { 
    if(show == false){ 
    $(".slider").animate({ 
    width: "toggle", 
    }, 300, function() { 
    }); 
    show = true; 
    } 
}); 
$('.hide-slider').click(function() { 
    if (show == true){ 
    $(".slider").animate({ 
    width: "toggle", 
    }, 300, function() { 
    }); 
     show = false; 
    } 
}); 

秀变量是第一个设置好的为真，因为DIV是开始看到...

改变你的小提琴，它会工作！