本文共 8642 字，大约阅读时间需要 28 分钟。
slideup
jQuery provides three useful sliding effect methods – slideUp, slideDown and slideToggle. We can use these methods to with sliding effect.
jQuery提供了三种有用的滑动效果方法： slideUp ， slideDown和slideToggle 。 我们可以使用这些方法来具有滑动效果 。
We will look at different jQuery sliding methods with examples.
我们将通过示例介绍不同的jQuery滑动方法。
Let’s look at all these jQuery slide methods with example programs.
让我们用示例程序查看所有这些jQuery幻灯片方法。
jQuery slideDown() method is used for the downward sliding transition of the selected html elements. The height attribute of the selected element is animated which makes the lower parts of the elements to reveal with a sliding effect. The parameters passed in the slideDown() method determines the behaviour of this effect.
jQuery slideDown（）方法用于所选html元素的向下滑动过渡。 所选元素的height属性具有动画效果，这使元素的下部具有滑动效果。 在slideDown（）方法中传递的参数确定此效果的行为。
Here is the general syntaxes for using slideDown() method.
这是使用slideDown（）方法的常规语法。
duration: The values of the duration are specified in milliseconds. We can also give string values like “slow” and “fast”. Default duration is 400 milliseconds.
duration ： 持续时间的值以毫秒为单位。 我们还可以给定字符串值，例如“ slow”和“ fast”。 默认持续时间为400毫秒。
callBackfunction: This function is fired after the completion of sliding transition.
callBackfunction ：滑动转换完成后会触发此函数。
easing: This parameter determines which easing function like “swing” or “linear” is used for transition. “swing” is the default value.
缓动 ：此参数确定使用哪种缓动功能（例如“ swing”或“ linear”）进行过渡。 默认值是“ swing”。
options: This could be anything like duration, callBackfunction, easing, special easing etc.
options ：可以是持续时间，callBackfunction，缓动，特殊缓动等。
The following example demonstrates the slideDown() method. In this example, slideDown() method takes two parameters; duration with value “slow” and a call back function. When you run this demo, you can see the call back function fires after the sliding effect.
下面的示例演示了slideDown（）方法。 在此示例中，slideDown（）方法采用两个参数； 持续时间，值“ slow”和回调函数。 运行此演示时，您可以看到在滑动效果后触发了回调函数。
jQuery-slideDown.html
jQuery-slideDown.html
jQuery Slide Down JournalDev jQuery SlideDown
You might have met with the slide down effects in many web pages. This is how we accomplish the slide down effect in jQuery. The parameters passed to this method is similar to the jQuery hide() and show() method. Below is the output produced by above jQuery slideDown example.
您可能已经在许多网页中遇到了滑倒效果。 这就是我们如何实现jQuery中的下滑效果。 传递给此方法的参数类似于jQuery hide（）和show（）方法。 下面是上面的jQuery slideDown示例产生的输出。
jQuery slideUp method is used for the upward sliding transition of the selected html elements. The height attribute of the selected element is animated which makes the lower parts of the elements to conceal with a sliding effect. The parameters passed in the slideUp() method determines the behaviour of this effect.
jQuery slideUp方法用于所选html元素的向上滑动过渡。 选定元素的height属性具有动画效果，使元素的下部隐藏起来具有滑动效果。 在slideUp（）方法中传递的参数确定此效果的行为。
Here is the general syntaxes for using slideUp() method.
这是使用slideUp（）方法的常规语法。
duration: The values of the duration are specified in milliseconds. We can also give string values like “slow” and “fast“. Default duration is 400 milliseconds.
duration ： 持续时间的值以毫秒为单位。 我们还可以提供字符串值，例如“ slow ”和“ fast ”。 默认持续时间为400毫秒。
callBackfunction: This function is fired after the completion of sliding transition.
callBackfunction ：滑动转换完成后会触发此函数。
easing: This parameter determines which easing function like “swing” or “linear” is used for transition. “swing” is the default value.
缓动 ：该参数确定使用哪种缓动功能（例如“ swing ”或“ linear ”）进行过渡。 默认值是“ swing”。
options: This could be anything like duration, callBackfunction, easing, special easing etc.
options ：可以是持续时间，callBackfunction，缓动，特殊缓动等。
The following example demonstrates the slideUp() method. In this example, slideUp() method takes two parameters; duration with value “slow” and a call back function. When you run this demo, you can see the call back function fires after the sliding effect.
下面的示例演示了slideUp（）方法。 在此示例中，slideUp（）方法采用两个参数； 持续时间，值“ slow”和回调函数。 运行此演示时，您可以看到在滑动效果后触发了回调函数。
jQuery-slideUp.html
jQuery-slideUp.html
jQuery Slide Up JournalDev jQuery SlideUp
This is how we accomplish the sliding up effect in jQuery. The parameters passed to this method is similar to the jQuery hide() and show() method. This will be a handy method while designing web pages.
这就是我们如何实现jQuery中的向上滑动效果。 传递给此方法的参数类似于jQuery hide（）和show（）方法。 在设计网页时，这将是一种方便的方法。
jQuery slideToggle method is used to hide or display the selected html elements. The height attribute of the selected element is animated which makes the lower parts of the elements to reveal or conceal with a sliding transition. The slideToggle() method checks the visibility of the selected element first. If the element is visible then it will trigger the slideUp() method else it triggers slideDown() method.
jQuery slideToggle方法用于隐藏或显示选定的html元素。 选定元素的height属性是动画的，这使元素的下部可以通过滑动过渡来显示或隐藏。 slideToggle（）方法首先检查所选元素的可见性。 如果该元素可见，则它将触发slideUp（）方法，否则将触发slideDown（）方法。
Here is the general syntaxes for using slideToggle method.
这是使用slideToggle方法的常规语法。
duration: The values of the duration are specified in milliseconds. We can also give string values like “slow” and “fast”. Default duration is 400 milliseconds.
duration ： 持续时间的值以毫秒为单位。 我们还可以给定字符串值，例如“ slow”和“ fast”。 默认持续时间为400毫秒。
callBackfunction: This function is fired after the completion of sliding transition.
callBackfunction ：滑动转换完成后会触发此函数。
easing: This parameter determines which easing function like “swing” or “linear” is used for transition. “swing” is the default value.
缓动 ：此参数确定使用哪种缓动功能（例如“ swing”或“ linear”）进行过渡。 默认值是“ swing”。
options: This could be anything like duration, callBackfunction, easing, special easing etc.
options ：可以是持续时间，callBackfunction，缓动，特殊缓动等。
The following example demonstrates the slideToggle() method. In this example, slideToggle() method takes two parameters; duration with value “slow” and a call back function. When you run this demo, you can see the call back function triggers after the sliding effect.
下面的示例演示了slideToggle（）方法。 在此示例中，slideToggle（）方法采用两个参数； 持续时间，值“ slow”和回调函数。 运行此演示时，可以看到滑动效果后触发了回调函数。
jQuery-slideToggle.html
jQuery-slideToggle.html
jQuery Slide Toggle JournalDev jQuery SlideToggle
This is how we toggle between hide and display of the html elements with a sliding transition. The parameters passed in the slideToggle() method is similar to slideUp() and slideDown() methods.
这是我们通过滑动过渡在html元素的隐藏和显示之间切换的方式。 在slideToggle（）方法中传递的参数类似于slideUp（）和slideDown（）方法。
You can use below links to see jQuery slide up, slide down and slide toggle effects in action.
您可以使用下面的链接查看jQuery的滑动，滑动和滑动切换效果。
That’s all for jQuery sliding effects for showing and hiding DOM elements, we will be looking into more jQuery effects in future posts.
这就是用于显示和隐藏DOM元素的jQuery滑动效果，在以后的文章中我们将研究更多jQuery效果。
翻译自:
slideup
转载地址：http://yoqzd.baihongyu.com/