«

JQuery实现DIV其他动画效果的简单实例

时间：2024-3-2 08:27     作者：韩俊     分类： Javascript

1.toggle

切换对象的隐藏和显示，可以用来代替show和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 淡入（本来是隐藏的），fadeOut 淡出（本来是显示的）

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>

以上这篇JQuery实现DIV其他动画效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

标签: javascript

热门推荐

1 Vue文档中的条件渲染函数实例分析
2 vue怎么实现子节点在父级窗口关闭时执行操作
3 JS表单验证的代码(常用)
4 jQuery图片加载显示loading效果
5 jQuery实现为LI列表前3行设置样式的方法【2种方法】
6 js函数调用的方式
7 JS组件Bootstrap Select2使用方法详解
8 详解JavaScript逻辑And运算符
9 javascript的几种写法总结
10 nw.js实现类似微信的聊天软件

日历

标签

hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

搜索

最新文章

热门文章