slideup_jQuery slideUp，slideDown，slideToggle

最新推荐文章于 2022-04-16 18:18:48 发布

cunchi4221

最新推荐文章于 2022-04-16 18:18:48 发布

阅读量393

点赞数

文章标签： python html javascript js jquery ViewUI

原文链接：https://www.journaldev.com/4773/jquery-slideup-slidedown-slidetoggle

版权

slideup

jQuery provides three useful sliding effect methods – slideUp, slideDown and slideToggle. We can use these methods to show and hide an HTML DOM element with sliding effect.

jQuery提供了三种有用的滑动效果方法： slideUp ， slideDown和slideToggle 。我们可以使用这些方法来显示和隐藏具有滑动效果HTML DOM元素。

jQuery幻灯片 (jQuery slide)

We will look at different jQuery sliding methods with examples.

我们将通过示例介绍不同的jQuery滑动方法。

jQuery slideDown(): jQuery slideDown() method is used to show the hidden HTML element where it looks like the content is getting shown by sliding down.
jQuery slideDown（） ：jQuery slideDown（）方法用于显示隐藏HTML元素，看起来像通过向下滑动显示内容一样。
jQuery slideUp(): jQuery slideUp() method is used to hide the HTML element where it looks like the content is getting hidden by sliding up.
jQuery slideUp（） ：jQuery slideUp（）方法用于隐藏看起来像通过向上滑动隐藏内容HTML元素。
jQuery slideToggle(): jQuery slideToggle() method is used to toggle the HTML element with sliding hide and show effects. If the element is hidden, then it will show the element like slideDown() method. For visible elements, it will work as slideUp() method.
jQuery slideToggle（） ：jQuery slideToggle（）方法用于切换具有隐藏和显示效果HTML元素。如果该元素是隐藏的，则它将显示该元素，如slideDown（）方法。对于可见元素，它将用作slideUp（）方法。

Let’s look at all these jQuery slide methods with example programs.

让我们用示例程序查看所有这些jQuery幻灯片方法。

jQuery slideDown (jQuery slideDown)

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（）方法的常规语法。

slideDown(duration);
slideDown（duration）;
slideDown(duration, callBackfunction);
slideDown（持续时间，callBackfunction）;
slideDown(speed, easing, callBackfunction);
slideDown（速度，缓动，callBackfunction）;
slideDown(options);
slideDown（options）;

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，缓动，特殊缓动等。

jQuery slideDown示例 (jQuery slideDown Example)

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

<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Down</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script> 
$(document).ready(function(){
  $("#btn1").click(function(){
    $(".divClass").slideDown("slow",function ()
    {
       $("#textMsg").text("Slide Down completed.");
    });
  });
});
</script>
 
<style> 
.divClass
{
    padding:5px;
    text-align:center;
    background-color:green;
    border:solid 1px;
}
.divClass
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>

<button id="btn1">Click Me to slide down</button>
<div class="divClass"><b>JournalDev</b> <br><br>jQuery SlideDown</div>
<div id="textMsg"></div>

</body>
</html>

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 (jQuery slideUp)

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（）方法的常规语法。

slideUp (duration);
slideUp（持续时间）；
slideUp (duration,callBackfunction);
slideUp（duration，callBackfunction）;
slideUp (speed,easing,callbackMethod);
slideUp（speed，easing，callbackMethod）;
slideUp (options);
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，缓动，特殊缓动等。

jQuery slideUp示例 (jQuery slideUp Example)

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

<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Up</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script> 
$(document).ready(function(){
    $("#btn1").click(function(){
    $(".divClass").slideUp("slow",function()
    {
      $("#textMsg").text("Slide Up completed.");
    });
  });

});
</script>
 
<style> 
.divClass
{
    margin-top:20px;
    padding:10px;
    text-align:center;
    background-color:green;
    border:solid 1px;
    height:200px;
    width: 300px;
}
</style>
</head>
<body>

<button id="btn1">Click Me to slide up</button>
<div class="divClass"><br><b>JournalDev</b> <br><br>jQuery SlideUp</div>
<div id="textMsg"></div>

</body>
</html>

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 (jQuery slideToggle)

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方法的常规语法。

slideToggle (duration);
slideToggle（持续时间）;
slideToggle (duration,callBackfunction);
slideToggle（duration，callBackfunction）;
slideToggle (speed,easing,callbackMethod);
slideToggle（speed，easing，callbackMethod）;
slideToggle (options);
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，缓动，特殊缓动等。

jQuery slideToggle示例 (jQuery slideToggle Example)

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

<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Toggle</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script> 
$(document).ready(function(){
    $("#btn1").click(function(){
    $(".divClass").slideToggle("slow",function()
    {
      alert("Slide Toggle Method completed.");
    });
  });
});
</script>
 
<style> 
.divClass
{
    margin-top:20px;
    padding:10px;
    text-align:center;
    background-color:green;
    border:solid 1px;
    height:200px;
    width: 300px;
}
</style>
</head>
<body>

<button id="btn1">Click Me to slide Toggle</button>
<div class="divClass"><br><b>JournalDev</b> <br><br>jQuery SlideToggle</div>
<div id="textMsg"></div>

</body>
</html>

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（）方法。

jQuery slideDown，slideUp和slideToggle演示 (jQuery slideDown, slideUp and slideToggle Demo)

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效果。

翻译自: https://www.journaldev.com/4773/jquery-slideup-slidedown-slidetoggle

slideup

cunchi4221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
slideup_jQuery slideUp，slideDown，slideToggle

slideupjQuery provides three useful sliding effect methods – slideUp, slideDown and slideToggle. We can use these methods to show and hide an HTML DOM element with sliding effect. jQuery提供了三种有用的滑动效果方法...
复制链接

扫一扫