使用Fadein创建jQuery照片幻灯片，然后淡出

此屏幕截图演示了使用jQuery'sfadeIn和fadeOut方法创建一个简单的幻灯片。 这些方法提供了对元素可见性的方便动画控制，比仅CSS3提供了更多的颗粒状控制。该视频展示了该技术，并允许您将其与其他方法进行比较。 [YouTube pxyflux7ibk]这是可学习的课程中的“ jQuery：Beyond Baseals”课程的摘录。

常见问题（FAQS）

>

停止幻灯片：

停止幻灯片，利用jQuery的

方法。 这立即结束目标元素上的任何活动动画。例如：stop()$("#slideshow").stop();

控制动画速度： 通过将持续时间（以毫秒为单位）指定为参数，以调整

和（2秒淡出）。fadeIn fadeOut $("#element").fadeIn(2000);添加延迟：

>使用jQuery的方法来引入动画之间的暂停。 例如：（淡入淡出和淡入淡出之间的2秒延迟）。

>

> delay()使用各种元素：$("#element").fadeIn().delay(2000).fadeOut();

>

和的方法不仅限于图像；它们在任何HTML元素（Divs，段落等）上工作，前提

创建一个连续循环：fadeIn> fadeOut为了实现连续循环，组合hide()，

和

>方法。 此示例将第一个图像移至逐渐消失后的结尾：

添加图像标题：fadeIn fadeOut end()通过在

function loop() {
  $("#slideshow img").first().fadeOut().end().appendTo('#slideshow');
  setTimeout(loop, 3000);
}
loop();

中使用数据属性来包含字幕

实现导航按钮：

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002191010970.jpg" class="lazy" alt="Creating a jQuery Photo Slideshow with fadeIn and fadeOut " />>创建按钮，并使用jQuery连接单击操作员。 这些处理程序可以使用>和

$("#slideshow img").fadeIn(function() {
  var caption = $(this).data('caption');
  $("#caption").text(caption);
});

显示下一个或上一个图像。 示例（简化）：

背景图像：

fadeIn fadeOut直接将

/

$("#prev").click(function() { /* Move first image to beginning */ });
$("#next").click(function() { /* Move first image to end */ });

直接应用于背景图像，因为不透明度会影响整个元素。 但是，您可以通过将背景图像包裹在Div中并淡入Div。

>交叉填充：

>同时淡出一个图像，同时在下一步中褪色以产生交叉效果。 这通常需要图像的绝对定位。

> fadeInfadeOut> jQuery的替代方案：

> CSS过渡提供了无jQuery的替代方案，尽管它们需要更多的手动编码。 示例（简化）：

function loop() {
  $("#slideshow img").first().fadeOut().end().appendTo('#slideshow');
  setTimeout(loop, 3000);
}
loop();

此扩展的响应为每个常见问题解答提供了更详细的说明和代码示例。

以上是使用Fadein创建jQuery照片幻灯片，然后淡出的详细内容。更多信息请关注PHP中文网其他相关文章！