使用 Jquery slideToggle 实现幻灯片效果-之路教程

例子

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Using jquery to show and hide elements with a slider effect</title>
    <style type="text/css">
     #item {
	   display: none;
	   height:200px;
	   border:1px solid #000;
     }
	 #slideButton {
	   border:1px solid #000;
	   padding:0.3em;
	 }
    </style>
	<script src="jquery-1.10.2.min.js" type="text/javascript">
	</script>
  </head>
  <body>
    <div id="slideButton">Show More</div>
    <div id="item">Just some textural content in a div...</div>
    <script type="text/javascript">
$('#slideButton').click(function() {
  $('#item').slideToggle('slow', function() {
    //Animation complete.
  });
});
    </script>
  </body>
</html>

x 秒后自动隐藏元素

除了slideToogle 函数，我们还有另外两个函数——slideDown 和slideUp。
如果我们想更好地控制效果的行为，可以使用这些函数。

slideDown 只会工作一次，如果元素已经显示，则不会工作，反之，slideUp – 所以这意味着如果你希望元素通过其他机制隐藏，你将不得不自己编码.例如，假设我们希望元素在 4 秒后自动隐藏，我们可以使用 JavaScript SetTimeout 函数。
IE。

$('#slideButton').click(function() {
  $('#item1').slideDown('slow', function() {
	setTimeout(function() {
	  $(this).slideUp('slow', function() {
	    //Animation complete.
            });
	}, 4000);
  });
});

这里有两件事你应该注意，使用 $(this) 来引用最后一个节点，以及 SetTimeout 的第二个参数中的超时，以毫秒为单位。

使用 Jquery slideToggle 实现幻灯片效果

使用 jquery，我们还可以创建滑动类型的效果。
应用于最初隐藏的元素，我们可以使元素“向下滑动”到其全高——这是向用户显示更多细节的有用方式。

理想情况下，我们希望元素在单击按钮时向下滑动，如果元素已经可见，则再次隐藏——但首先我们将展示如何使元素变得可见。
以下脚本引用了 HTML 源代码中的唯一 ID，即 #slideButton ID，它是将激活 jquery 幻灯片效果的按钮的 ID。
IE。

$('#slideButton').click(function() {
  //Code here
});

我们需要做的下一件事是添加我们想要使用的幻灯片效果，并选择我们想要通过其 ID 淡化的元素 - 在这种情况下 #item - 我们将使用 slideToggle 函数，它会自动显示和根据元素的当前状态隐藏元素。

$('#item').slideToggle('slow', function() {
  //Animation complete.
});

这应该导致以下 JavaScript：

$('#slideButton').click(function() {
  $('#item').slideToggle('slow', function() {
  //Animation complete.
  });
});

日期：2020-06-02 22:17:28 来源：oir作者：oir

←使用 Jquery 来淡化 HTML 元素

KDE：修改光标大小→

例子

x 秒后自动隐藏元素

目录