recherche

Maison >interface Web >js tutoriel >Un exemple simple de JQuery implémentant d'autres effets d'animation de DIV

Un exemple simple de JQuery implémentant d'autres effets d'animation de DIV

高洛峰
高洛峰original
2016-12-28 10:38:071151parcourir

1.toggle

Changer le masquage et l'affichage des objets, qui peuvent être utilisés pour remplacer show et hide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
    width:200px;
    height:200px;
    background-color:red;
    border:1px black solid;
    clear:both;
}
#btn,#info
{
    float:left;
}
#info
{
    margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
    $("#btn").click(function(){
        var msg1;
        var msg2;
        if($("#div1").css("display")=="none")
        {
            msg1="正在显示...";
            msg2="显示完毕!";
        }
        else
        {
            msg1="正在隐藏...";
            msg2="隐藏完毕!";
        }
        $("#info").html(msg1);
        $("#div1").toggle(4000,function(){
            $("#info").html(msg2);
        });
    });
});
</script>
</head>
<body>
<input type="button" value="变换" id="btn" />
<div id="info">1</div>
<div id="div1"></div>
</body>
</html>

2.fadeIn fadeOut

fadeIn fade in (initialement caché), fadeOut disparaît (affiché à l'origine)

fadeOut

Lors du fondu sortant, cet espace sera masqué et le module ci-dessous remontera 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
    width:200px;
    height:200px;
    background-color:red;
    border:1px black solid;
    clear:both;
}
#btn,#info
{
    float:left;
}
#info
{
    margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
    $("#btn").click(function(){
        $("#div1").fadeOut(4000);
    });
});
</script>
</head>
<body>
<input type="button" value="变换" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

fadeIn

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
    width:200px;
    height:200px;
    background-color:red;
    border:1px black solid;
    clear:both;
}
#btn,#info
{
    float:left;
}
#info
{
    margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
    $("#div1").css("display","none");
    $("#btn").click(function(){
        $("#div1").fadeIn(4000);
    });
});
</script>
</head>
<body>
<input type="button" value="变换" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

3.fadeTo

Passer à une transparence spécifiée : 0 signifie complètement transparent, 1 signifie opaque. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
    width:200px;
    height:200px;
    background-color:red;
    border:1px black solid;
    clear:both;
}
#btn,#info
{
    float:left;
}
#info
{
    margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
    $("#btn").click(function(){
        $("#div1").fadeTo(4000,0.1);
    });
});
</script>
</head>
<body>
<input type="button" value="变换" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

4.slideUp et slideDown

slideUp : faites glisser l'objet caché vers le haut

slideDown : faites glisser l'objet affiché vers le bas (indiquant qu'il est initialement masqué)

slideUp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
    width:200px;
    height:200px;
    background-color:red;
    border:1px black solid;
    clear:both;
}
#btn,#info
{
    float:left;
}
#info
{
    margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
    $("#btn").click(function(){
        $("#div1").slideUp(4000);
    });
});
</script>
</head>
<body>
<input type="button" value="变换" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

slideDown

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
    width:200px;
    height:200px;
    background-color:red;
    border:1px black solid;
    clear:both;
}
#btn,#info
{
    float:left;
}
#info
{
    margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
    $("#div1").css("display","none");
    $("#btn").click(function(){
        $("#div1").slideDown(4000);
    });
});
</script>
</head>
<body>
<input type="button" value="变换" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

5.slideToggle

Le glissement réalise le masquage et l'affichage des objets

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
    width:200px;
    height:200px;
    background-color:red;
    border:1px black solid;
    clear:both;
}
#btn,#info
{
    float:left;
}
#info
{
    margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
    $("#btn").click(function(){
        $("#div1").slideToggle(4000);
    });
});
</script>
</head>
<body>
<input type="button" value="变换" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

Ce qui précède Cet exemple simple de JQuery réalisant d'autres effets d'animation de DIV est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez le site Web PHP chinois.

Pour des exemples plus simples de JQuery implémentant d'autres effets d'animation DIV, veuillez faire attention au site Web PHP chinois pour les articles connexes !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Implémenter des effets d'animation de page via jquery (exemple de code)Article suivant：Implémenter des effets d'animation de page via jquery (exemple de code)

Articles Liés

Voir plus