jQuery 滑动 效果
在本教程中，您将学习如何使用 jQuery 创建滑动动作效果。
jQuery slideUp() 和 slideDown() 方法
jQuery slideUp() 和 slideDown() 方法用于通过逐渐减小或增加它们的高度（即通过向上或向下滑动它们）来隐藏或显示 HTML 元素。
<script>
$(document).ready(function(){
// 向上滑动显示的段落
$(".up-btn").click(function(){
$("p").slideUp();
});
// 向下滑动隐藏段落
$(".down-btn").click(function(){
$("p").slideDown();
});
});
</script>与其他 jQuery 效果方法一样，您可以选择为 slideUp() 和 slideDown() 方法指定持续时间或速度参数，以控制幻灯片动画将运行多长时间。 持续时间可以使用预定义字符串 'slow' 或 'fast' 之一指定，也可以以毫秒为单位； 较高的值表示较慢的动画。
<script>
$(document).ready(function(){
// 以不同的速度向上滑动显示的段落
$(".up-btn").click(function(){
$("p.normal").slideUp();
$("p.fast").slideUp("fast");
$("p.slow").slideUp("slow");
$("p.very-fast").slideUp(50);
$("p.very-slow").slideUp(2000);
});
// 以不同的速度向下滑动隐藏的段落
$(".down-btn").click(function(){
$("p.normal").slideDown();
$("p.fast").slideDown("fast");
$("p.slow").slideDown("slow");
$("p.very-fast").slideDown(50);
$("p.very-slow").slideDown(2000);
});
});
</script>您还可以指定一个 回调函数 在 slideUp() 或 slideDown() 方法完成后执行。 我们将在接下来的章节中了解有关回调函数的更多信息。
<script>
$(document).ready(function(){
// 向上滑动段落后显示警报消息
$(".up-btn").click(function(){
$("p").slideUp("slow", function(){
// 要执行的代码
alert("The slide-up effect is completed.");
});
});
// 向下滑动段落后显示警报消息
$(".down-btn").click(function(){
$("p").slideDown("slow", function(){
// 要执行的代码
alert("The slide-down effect is completed.");
});
});
});
</script>jQuery slideToggle() 方法
jQuery slideToggle() 方法通过动画显示或隐藏选定元素的高度，如果元素最初显示，它将向上滑动； 如果隐藏，它将向下滑动，即在 slideUp() 和 slideDown() 方法之间切换。
<script>
$(document).ready(function(){
// 通过滑动切换段落显示
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>同样，您可以像 slideUp() 和 slideDown() 方法一样为 slideToggle() 方法指定持续时间参数来控制滑动切换动画的速度。
<script>
$(document).ready(function(){
// 幻灯片以不同的速度切换段落
$(".toggle-btn").click(function(){
$("p.normal").slideToggle();
$("p.fast").slideToggle("fast");
$("p.slow").slideToggle("slow");
$("p.very-fast").slideToggle(50);
$("p.very-slow").slideToggle(2000);
});
});
</script>同样，您也可以为 slideToggle() 方法指定一个回调函数。
<script>
$(document).ready(function(){
// 幻灯片切换段落后显示警报消息
$(".toggle-btn").click(function(){
$("p").slideToggle(1000, function(){
// 要执行的代码
alert("The slide-toggle effect is completed.");
});
});
});
</script>Advertisements