您的位置：首页 > Web前端 > JQuery

jQuery -- 内容的淡入与淡出

2016-05-10 22:40 429 查看

本篇文章讲述了jQuery中文字或图形的淡入与淡出的动画效果，根据官方的API分为四个部分。

第一部分：show/hide/toggle

会出现五个滑块，点击后，内容会逐渐消失在左上角，有位移浮动。

h5文件中：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画效果</title>
<script src="jquery-2.2.3.min.js"></script>
<script src="index.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--<p>hello</p>-->
<!--<button id="hide">隐藏</button>-->
<!--<button id="show">显示</button>-->
<!--<button id="toggle">隐藏/显示</button>-->
<script>

// 使用for循环创建五个div块,然后在css中设定块的样式
for (var i = 0 ; i < 5 ; i++){
$("<div>").appendTo(document.body);
}

$("div").click(function(){
$(this).hide(1000function (){
$(this).remove();
});
});
</script>

</body>
</html>

js文件中：

$(document).ready(function(){

// 通过id是需要"#"号的
$("#hide").click(function(){
$("p").hide(1000);  // 后边的参数是隐藏动画的延续时间,单位是毫秒
});

$("#show").click(function(){
$("p").show(1000);
});

//  隐藏/显示
$("#toggle").click(function(){
$("p").toggle(100);
});
});

另外，还有.css中对div块的设计：

div{
background-color: red;
width: 30px;
height: 50px;
margin: 2px;
float: left;
}

第二部分：fade in/out/to/toggle

这个效果不会产生位移浮动，而是内容原地淡化或者出现。
有所不同的是： fade to是可以改变内容整体的透明度，所以后面存在两个参数。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<script src="jquery-2.2.3.min.js"></script>
<script src="fadeindex.js"></script>
</head>
<body>
<!-- fade in  是让其出现-->
<button id="in">fade in</button>
<!-- fade out 是让其隐藏-->
<button id="out">fade out</button>
<!-- toggle 是让其隐藏-->
<button id="toggle">fade toggle</button>
<!-- fade to 是让其隐藏-->
<button id="to">fade to</button>

<!--display:none  是让其默认出现的时候处于隐藏状态-->
<div id="div1" style="width: 100px; height: 80px; background-color: aqua; display: none" ></div>
<div id="div2" style="width: 100px; height: 80px; background-color: rebeccapurple; display: none" ></div>
<div id="div3" style="width: 100px; height: 80px; background-color: gray; display: none" ></div>

</body>
</html>

$(document).ready(function(){
$("#in").on("click",function(){
$("#div1").fadeIn(1000);
$("#div2").fadeIn(1000);
$("#div3").fadeIn(1000);
});
$("#out").on("click",function(){
$("#div1").fadeOut(1000);
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
});
$("#toggle").on("click",function(){
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(1000);
});

$("#to").on("click",function(){
// 后边的参数是透明度(0~1)
$("#div1").fadeTo(1000,0);
$("#div2").fadeTo(1000,0.5);
$("#div3").fadeTo(1000,1);
});
});

第三部分：slide up/down/toggle

内容从上放逐渐伸展出来/从下方逐渐收缩至上方消失。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slide滑动</title>
<script src="jquery-2.2.3.min.js"></script>
<script src="slide.js"></script>
<style>
#content,#flipshow,#fliphide,#fliptoggle{
padding: 5px;
text-align: center;
background-color: red;
border: solid 1px gray;
}
#content{
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flipshow">出现</div>
<div id="fliphide">隐藏</div>
<div id="fliptoggle">隐藏/显示</div>
<div id="content">hello world</div>
</body>
</html>

$(document).ready(function(){
$("#flipshow").click(function(){
$("#content").slideDown(1000);
})
$("#fliphide").click(function(){
$("#content").slideUp(1000);
})
$("#fliptoggle").click(function(){
$("#content").slideToggle(1000);
})
});

第四部分：动画完成后的回调

这个与上面的不同，这是为了在动画完成后执行下一步操作。也可以用户执行一次操作，出现多个动画效果。

<body>
<button id="btn">按钮</button>
<p>hello world</p>
</body>

$(document).ready(function(){
$("#btn").click(function(){
//$("p").hide(1000,function(){
//    //alert("动画结束,回调方法");
//})

// 一次进行两个动画 -- 颜色变红色的同事先隐藏,再出现
$("p").css("color","red").slideUp(1000).slideDown(1000);
})
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航