Question

  $("#text_slider div:gt(0)").hide();

 setInterval(function() { 
$("#text_slider div:first")
  .fadeOut(500).next().fadeIn(500).end().appendTo("#text_slider");

},5000);

我的HTML代码是

<body>
<div id="text_slider">
<div><p>First Text</p></div>
<div><p>Second Text</p></div>
<div><p>Third Text</p></div>
</div>
<script src="C:\Users\bonny\Documents\samples sites\jquery\jquery.js">      </script>
 <script src="1.js"></script>
 </body>

我的css

 #text_slider{
width:600px;
height:300px;
margin:100px auto;
box-shadow:0 0 5px 5px #000;
}
#text_slider div {
position:absolute;

}
 #text_slider p{
margin:20px;
font-size:30px;

 }

我正在使用jquery构建一个文本滑块，并看到上面的jquery代码在教程中成功使用但我很难理解它是如何工作的。这就是我所知道的：第一个语句隐藏所有文本（所有3个子div）以防止它们在开始时堆叠在彼此之上。首先，fadeOut函数在“first text”div上移动然后移动到它的兄弟（我认为？）“Second Text”div，而“second text”div在500ms内消失。然后end（）将属性重定向到容器div。（但我对此后其余程序的工作方式感到迷茫。在上面的代码中，Append做了什么。

如果我上面的解释在某处错了，请纠正我。我还是新人。

Answer 1

$("#text_slider div:gt(0)").hide(); - 隐藏所有div，它们是“text_slider”div的子项，除了第一个。那是:gt(0)部分。

setInterval(function, 5000)表示每隔5秒运行一次代码内的代码。

$("#text_slider div:first")查找第一个div是“text_slider”

的子元素

.fadeOut(500)在1/2秒内淡出。

.next()转移到下一个兄弟。

.fadeIn(500)在1/2秒内逐渐淡化该兄弟姐妹

.end()返回到此链中最初选定的元素，或第一个子div。

.appendTo("#text_slider");将第一个子div添加到结尾，基本上重新排序并使其成为最后一个子节点。其他人按顺序上升。

Answer 2

$("#text_slider div:gt(0)").hide();

这行代码隐藏了#text_slider中除第一个div之外的所有div。在此处检查对：gt（）选择器的引用：https://api.jquery.com/gt-selector/

   setInterval(function() {
     $("#text_slider div:first")
       .fadeOut(500).next().fadeIn(500).end().appendTo("#text_slider");
   }, 5000);

一旦其他div被隐藏，代码只显示第一个div（使用：first selector - https://api.jquery.com/first-selector/），然后这个setInterval函数接管每隔5秒执行一次。 #text_slider中的第一个div被找到并淡出，然后使用next（）函数，然后找到之前隐藏的以下div并且fadedIn，最后，已经淡出的div被附加到#text_slider div因此重新排序text_slider div中的三个div。所以#text_slider始终都有包含所有三个子div的html。

在此处查看此工作小提琴：fiddle

理解jQuery滑块函数

2 个答案: