jQuery -- 内容的淡入与淡出

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

第一部分:show/hide/toggle

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

h5文件中:


<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>
    
    
    
    
<script>

    // 使用for循环创建五个div块,然后在css中设定块的样式
    for (var i = 0 ; i < 5 ; i++){
        $("
").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是可以改变内容整体的透明度,所以后面存在两个参数。

<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>
    
    <button id="in">fade inbutton>
    
    <button id="out">fade outbutton>
    
    <button id="toggle">fade togglebutton>
    
    <button id="to">fade tobutton>


    
    <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

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

<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 worlddiv>
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 worldp>
body>

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

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

你可能感兴趣的:(jQuery -- 内容的淡入与淡出)