AIDE技术官网
AIDEZY.COM

JQuery的4种动画特效效果实例

JQuery的4种动画特效效果实例

JQuery的4种动画特效效果实例

JQuery的4种动画特效效果实例:

 

    jquery的4种动画效果,包括点击消失,淡入淡出,向上向下消失等等。

JQuery的4种动画特效效果实例 jQuery教程 第2张

 

 

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div"><img src="http://wl.aidezy.com/2019063021041035340740.png"></div>
<div id="div2"><img src="http://wl.aidezy.com/2019063021041035340740.png"></div>
<div id="div3"><img src="http://wl.aidezy.com/2019063021041035340740.png"></div>
<div id="div4"><img src="http://wl.aidezy.com/2019063021041035340740.png"></div>


</body>
<script type="text/javascript" src="jquery-3.4.1.js"></script>

<script type="text/javascript">

$('#div').click(function(){
//点击消失
//show则是重新显示出来
$(this).hide(2000,function(){
alert('消失咯!!');
});
});


$('#div2').click(function(){
//向上消失后立即向下又重新出现,没有延迟
$(this).slideUp(2000 , function(){
$(this).slideDown(2000);
});
});

$('#div3').click(function(){
//向上消失,1000毫秒重新显示
$(this).slideUp(2000).delay(1000).slideDown(2000 , function(){
alert('重新显示完毕啦');
});
});

$('#div4').click(function(){
//淡入淡出效果,1000毫秒重现显示
$(this).fadeOut(2000).delay(1000).fadeIn(2000 , function(){
alert('重新显示完毕了');
});
});

</script>


</html>

 

搜一下

海报生成 赞(1) 打赏

来都来了!评论一下呗! 抢沙发

  • QQ (自动获取名称头像等信息|选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (选填)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

登录

忘记密码 ?

切换登录

注册