Question

我有一个切换div宽度的函数，因此它具有从屏幕边界外“滑入”的外观

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

有没有办法可以把它分成两个不同的函数，一个显示div，一个隐藏它？

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

我做了一个小提琴来说明我正在做的事情：http://jsfiddle.net/2x816nmf/1/。所以小提琴中的问题是.hide-slider和.show-slider只是切换宽度。 .hide-slider {em>仅将.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在start ...

上可见

改变你的小提琴它会起作用！

如何打破jQuery＆＃34;切换＆＃34;功能分离＆＃34;显示＆＃34;并且＆＃34;隐藏＆＃34;功能？

1 个答案: