「jQuery」动画&动效学习和练习延时执行淡入淡出动画

jQuery动画

show([speed,[easing],[fn]])

显示隐藏的匹配元素。

hide([speed,[easing],[fn]])

隐藏显示的元素

「jQuery」动画&动效学习和练习延时执行淡入淡出动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jq显示隐藏-乔越博客</title>
<!-- 引入jquery库 -->
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>

<style>
*{
margin: 0;
padding: 0;
}

div{
width: 200px;
height: 200px;
background: red;
display: none;
}
</style>

<script>

$(function(){

$("button").eq(0).click(function(){
// $("div").css("display","block");
$("div").show(1000);
})
$("button").eq(1).click(function(){
// $("div").css("display","none");
$("div").hide(1000);
})
$("button").eq(2).click(function(){
$("div").toggle(1000);
})

})
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
</html>

scroll([[data],fn]) 监听网页滚轮

当用户滚动指定的元素时,会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。

$(window).scroll( function() { /* ...do something... */ } );

「jQuery」动画&动效学习和练习延时执行淡入淡出动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对联广告-乔越博客</title>
<!-- 引入jquery库 -->
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<style>

*{
margin: 0;
padding: 0;
}
img{
width: 250px;
height: 400px;
display: none;
}
.left{
float: left;
position: fixed;
left: 0;
top: 200px;
}

.right{
float: right;
position: fixed;
right: 0;
top: 200px;
}
</style>
<script>
$(function(){
$(window).scroll(function(){
var offset = $("html,body").scrollTop();
if(offset >= 500){
$("img").show(1000);
}else{
$("img").hide(1000);
}
})
})
</script>
</head>
<body>
<img class="left" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592379021&di=288d03442624777f9bef0bab14fbe62e&src=http://d.hiphotos.baidu.com/zhidao/pic/item/738b4710b912c8fc40cc855efc039245d6882161.jpg" alt="">
<img class="right" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592389104341&di=84f707ab996b60cfbda20ee4da048669&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201305%2F12%2F20130512095153_WSu5Q.jpeg" alt="">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>乔越博客</p>
</body>
</html>

slideDown([speed],[easing],[fn])

通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。

$(".btn2").click(function(){
$("p").slideDown("时间|方法");
});

slideUp([speed,[easing],[fn]])

通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。

$("p").slideUp("时间|方法");

slideToggle([speed],[easing],[fn])

通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

$("p").slideToggle("时间|方法");

「jQuery」动画&动效学习和练习延时执行淡入淡出动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>展开收起-乔越博客</title>
<!-- 引入jquery库 -->
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<style>
*{
margin: 0;
padding: 0;
}

div{
height: 400px;
width: 100px;
background: red;
}
</style>

<script>

$(function(){
$("button").eq(0).click(function(){
$("div").slideDown(1000)
})
$("button").eq(1).click(function(){
$("div").slideUp(1000)
})
$("button").eq(2).click(function(){
$("div").slideToggle(1000)
})

})
</script>
</head>
<body>

<button>展开</button>
<button>收起</button>
<button>切换</button>

<div></div>


</body>
</html>

stop([clearQueue],[jumpToEnd])

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行。

$("#stop").click(function(){
$("#box").stop();
});

在jQuery中如果需要执行动画,建议在执行动画之前先调用 stop 方法 然后在执行动画.

淡入淡出

fadeIn([speed],[easing],[fn])

淡入

通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。

$("元素").fadeIn("时间"); //淡入

fadeOut([speed],[easing],[fn])

淡出

$("元素").fadeOut("时间");//淡出

fadeToggle([speed,[easing],[fn]])

淡入或淡出

$("元素").fadeToggle("时间","效果");

fadeTo([[speed],opacity,[easing],[fn]])

调整透明度

$("元素").fadeTo("slow", 0.66);
// 时间 透明度

「jQuery」动画&动效学习和练习延时执行淡入淡出动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淡入淡出-乔越博客</title>
<!-- 引入jquery库 -->
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>

<style>
div{
width: 200px;
height: 400px;
background: red;

}
</style>
<script>

$(function(){

$("button").eq(0).click(function(){
// 淡入
$("div").fadeIn(1000);
})
$("button").eq(1).click(function(){
// 淡出
$("div").fadeOut(1000);
})
$("button").eq(2).click(function(){
// 调整透明度
$("div").fadeTo(1000,0.5,function(){
});
})
$("button").eq(3).click(function(){
// 切换
$("div").fadeToggle(1000);
})

})


</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>淡入到</button>

<div>

</div>
</body>
</html>

自定义动画

animate(params,[speed],[easing],[fn])

参数

  1. params:一组包含作为动画属性和终值的样式属性和及其值的集合
  2. speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
  3. easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.
  4. fn:在动画完成时执行的函数,每个元素执行一次。

「jQuery」动画&动效学习和练习延时执行淡入淡出动画

<!--html-->
<button id="go"> Run</button>
<div id="block">Hello!</div>
//jquery
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});

delay(时间,[队列])

设置一个延时来推迟执行队列中之后的项目。

$('元素').slideUp(300).delay(800).fadeIn(400);
//1. 当slideUp动画执行完毕后
//2. 等待800毫秒后 (简单的说就是前面的执行完需要等会在执行下一个)
//3. 执行fadeIn动画

资源下载

上一篇

「jQuery」节点的添加操作&节点的复制(浅拷贝&深拷贝)&节点删除&节点替换