Ein einfaches Beispiel dafür, wie JQuery andere Animationseffekte von DIV implementiert-js-Tutorial-php.cn

Ein einfaches Beispiel dafür, wie JQuery andere Animationseffekte von DIV implementiert

高洛峰

Freigeben： 2016-12-28 10:38:07

Original

1162 Leute haben es durchsucht

1.toggle

Schalten Sie das Ausblenden und Anzeigen von Objekten um, was als Ersatz für Ein- und Ausblenden verwendet werden kann

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

Nach dem Login kopieren

2.fadeIn fadeOut

fadeIn fade in (ursprünglich ausgeblendet), fadeOut wird ausgeblendet (ursprünglich angezeigt)

fadeOut

Beim Ausblenden wird dieser Bereich ausgeblendet und das Modul darunter wird nach oben verschoben

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

3.fadeTo

Zu einer bestimmten Transparenz wechseln: 0 bedeutet vollständig transparent, 1 bedeutet undurchsichtig.

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

Nach dem Login kopieren

4.slideUp und slideDown

slideUp: Schieben Sie das ausgeblendete Objekt nach oben

slideDown: Schieben Sie das angezeigte Objekt nach unten (zeigt an, dass es ursprünglich ausgeblendet ist)

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

5.slideToggle

Sliding realisiert das Ausblenden und Anzeigenwechseln von Objekten

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

Nach dem Login kopieren

Das obige einfache Beispiel für die Realisierung anderer DIV-Animationseffekte durch JQuery ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass es Ihnen eine Referenz geben kann, und ich hoffe, dass Sie die chinesische PHP-Website unterstützen.

Weitere einfache Beispiele für die Implementierung anderer DIV-Animationseffekte durch JQuery finden Sie auf der chinesischen PHP-Website für verwandte Artikel!