DIV의 다른 애니메이션 효과를 구현하는 JQuery의 간단한 예-JS 튜토리얼-php.cn

DIV의 다른 애니메이션 효과를 구현하는 JQuery의 간단한 예

高洛峰

풀어 주다： 2016-12-28 10:38:07

원래의

1144명이 탐색했습니다.

1.toggle

표시 및 숨기기를 대체하는 데 사용할 수 있는 개체 숨기기 및 표시 전환

<!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(원래 Hidden), fadeOut fade out(원래 표시됨)

fadeOut

페이드아웃 시 이 공간은 숨겨지고 아래 모듈은 위로 이동합니다

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

지정된 투명도로 전환: 0은 완전히 투명함을 의미하고 1은 불투명함을 의미합니다.

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

slideUp: 숨겨진 개체를 위로 슬라이드

slideDown: 표시된 개체를 아래로 슬라이드(원래 숨겨져 있음을 나타냄)

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

슬라이딩으로 객체 숨기기 및 표시 전환 구현

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

로그인 후 복사

위 DIV의 다른 애니메이션 효과를 구현하는 JQuery의 간단한 예는 모두 편집자가 공유한 내용이므로 참고가 되기를 바라며 PHP 중국어 웹사이트를 지원해 주시길 바랍니다.

다른 DIV 애니메이션 효과를 구현하는 JQuery의 더 간단한 예를 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!