如何将 jQuery "toggle" 函数分解为单独的 "show" 和 "hide" 函数？

Question

我有一个函数可以切换 div 的宽度，所以它在屏幕边界之外显示 "sliding in"

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

有没有一种方法可以将它分成两个不同的函数，一个显示 div 和一个隐藏它？

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

我做了一个 fiddle 来说明我正在尝试做的事情：http://jsfiddle.net/2x816nmf/1/。所以 fiddle 中的问题是 .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;
    }
});

show 变量首先设置为 true，因为 div 在开始时可见...

改变你的 fiddle 它会起作用的！

如何将 jQuery "toggle" 函数分解为单独的 "show" 和 "hide" 函数？

How to break up a jQuery "toggle" function into seperate "show" and "hide" functions?

javascript

jquery

toggle