Javascript 具有切换Jquery的多个函数

我想做一个滑块。我有两个div，左箭头和右箭头

我的想法是，当单击左箭头或右箭头时，活动的

div

将被隐藏，并显示另一个视图。
我使用

toggle（）

执行此操作，它隐藏第一个视图，但不显示第二个视图

它需要顺利进行，就像旋转木马一样

以下是我的JQuery：

$("#test2").hide();

$("#left").click(function(){
  $("#test1").toggle("slide", function(){
    $("#test1").show();
    $("#test2").hide();

  }, function(){
    $("#test2").show();
    $("#test1").hide();
  });
});

以下是HTML的一个示例：

<div class="row">
  <div id="left></div>
  <div id="test1">image + text</div>
  <div id="test2">image + text</div>
  <div id="right"></div>
</div>

看起来您的JavaScript不正确。下面的更改将帮助您实现目标：

演示链接


HTML

<div class="row">
  <div id="left">LEFT</div>
  <div id="test1">image + text 1</div>
  <div id="test2">image + text 2</div>
  <div id="right">RIGHT</div>
</div>

看起来您的JavaScript不正确。下面的更改将帮助您实现目标：

演示链接


HTML

<div class="row">
  <div id="left">LEFT</div>
  <div id="test1">image + text 1</div>
  <div id="test2">image + text 2</div>
  <div id="right">RIGHT</div>
</div>

以下是“切换”的工作原理。

这个例子暗示了一个CSS类从“there”（应用于元素）或不存在切换

HTML:

JS:

^=
运算符表示“从开始”。
以下是“切换”的工作原理。

这个例子暗示了一个CSS类从“there”（应用于元素）或不存在切换

HTML:

JS:

^=
运算符表示“从开始”。
您在回调时调用的是函数“A”（函数“B”）的完全相反的函数。。。在
show（）
和
hide（）
的括号之间没有毫秒级的延迟。除了什么都没有，你期望结果是什么？听说过“双重否定”吗？您在回调时调用了与函数“A”完全相反的函数（函数“B”）。。。在
show（）
和
hide（）
的括号之间没有毫秒级的延迟。除了什么都没有，你期望结果是什么？听说过“双重否定”吗？这很有效，但我只能按一下每个箭头。我无法多次单击左箭头。它只在第一次尝试时起作用。不。此脚本只能在每个方向交替单击一次。@Spirit_Scarlet希望为您提供一个起点，并演示如何在元素之间平滑过渡。将只在两个div之间移动，但应该很容易通过使用进行扩展。这是可行的，但每个箭头只能单击一次。我无法多次单击左箭头。它只在第一次尝试时起作用。不。此脚本只能在每个方向交替单击一次。@Spirit_Scarlet希望为您提供一个起点，并演示如何在元素之间平滑过渡。将只在两个div之间进行，但应该很容易通过使用扩展。
<div class="row">
  <div id="left></div>
  <div id="test1">image + text</div>
  <div id="test2" class="hidden">image + text</div>
  <div id="right"></div>
</div>

.hidden{
  display:none;
}

$("#left, #right").click(function(){
  $(".row div[id^='test']").toggleClass("hidden");
});