登录  /  注册
博主信息
博文 42
粉丝 2
评论 0
访问量 52221
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
jq动画(hide show toggle fadeIn fadeOut fadeTo slideDown slideUp animate callback 案例下拉导航 水平3种导航)20118年1月24日22时
小明的博客
原创
1192人浏览过

今天主要学习了jq动画,包括隐藏hide  显示show  事件切换toggle 淡入fadeIn 淡出fadeOut 下滑slideDown 上滑slideUp 自定义动画animate,回调函数callback。

课堂演示了上述的动画效果,案例主要讲了移入移出顶部下拉返回效果,和三种水平的导航。代码如下:

一、各种动画演示

实例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>jq动画</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .content {
            margin: 20px;
            font-size: 20px;
            color: #fff;
            float: left;
        }
        .content p {
            width: 200px;
            height: 160px;
            line-height: 160px;
            background-color: red;
            text-align: center;
            position: relative;
        }
        .content button {
            width: 200px;
            height: 40px;
            border: none;
        }
        #box{width: 95px;height: 40px;border:none;}
       
    </style>
</head>
<body>
<div class="content">
        <button class="btu1">点我隐藏</button>
        <p class="box1">~ 我是hide ~</p>
    </div>
    <div class="content">
        <button class="btu2">点我显示</button>
        <p class="box2">~ 我是show ~</p>
    </div>
    <div class="content">
        <button class="btu3">事件切换</button>
        <p class="box3">~ 我是toggle ~</p>
    </div>
    <div class="content">
        <button class="btu4">淡入元素</button>
        <p class="box4">~ 我是fadeIn ~</p>
    </div>
    <div class="content">
        <button class="btu5">淡出元素</button>
        <p class="box5">~ 我是fadeOut ~</p>
    </div>
    <div class="content">
        <button class="btu6">淡出到指定值</button>
        <p class="box6">~ 我是fadeOut ~</p>
    </div>
    <div class="content">
        <button class="btu7">下滑效果</button>
        <p class="box7">~ 我是slideDown~</p>
    </div>
    <div class="content">
        <button class="btu8">上滑效果</button>
        <p class="box8">~ 我是slideUp ~</p>
    </div>
    <div class="content">
        <button class="btu9">动画效果</button>
        <p class="box9">~ 我是animate ~</p>
    </div>
    <div class="content ">
        <button class="btu10" id="box">动画效果</button>  <button class="btu11" id="box">停止动画</button>
        <p class="box10">~ 我是animate ~</p>
    </div>
    <div class="content">
        <button class="btu12">callback</button>
        <p class="box12">~ 我是callback ~</p>
    </div>
    <script>
        $(function(){
            // hide()隐藏
            $('.btu1').click(function(){
                $('.box1').hide();
            });
            // show()显示
            $('.box2').hide();
            $('.btu2').click(function(){
                $('.box2').show();
            });
            // toggle()事件切换
            $('.btu3').click(function(){
                $('.box3').toggle();
            });
            // 淡入fadeIn()
            $('.box4').hide();
            $('.btu4').click(function(){
                $('.box4').fadeIn(800);
            });
            // 淡出 fadeOut()
            $('.btu5').click(function(){
                $('.box5').fadeOut(800);
            });
            // fadeTo 淡化到指定值            
            $('.btu6').click(function(){
                $('.box6').fadeTo(800, 0.3);
            });
            // slideDown 下滑
            $('.box7').hide();
            $('.btu7').click(function(){
                $('.box7').slideDown();
            });
            // slideUp
            $('.btu8').click(function(){
                $('.box8').slideUp();
            });
            // animate动画
            $('.btu9').click(function(){
                $('.box9').animate({
                    height:'120px',
                    fontSize:'28px'
                }, 800);
            });
            // stop()停止动画
            $('.btu10').click(function(){
                $('.box10').animate({
                    height:'120px',
                    fontSize:'28px'
                }, 1000);
            });
            $('.btu11').click(function(){
                $('.box10').stop();
            });
            // callback 在动画做完之后,再调用callback里面的函数
            $('.btu12').click(function(){
                $('.box12').animate({height:'300px'},1000,function(){
                    $(this).animate({height:'100px'}, 1000);
                });
            });
        });
    </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

二、案例

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>案例练习</title>
  <link rel="icon" type="image/x-icon" href="2.png"> 
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
	<style type="text/css">
	    *{margin: 0;padding: 0;}
			.box {
				width: 100%;
				height: 70px;
				background-color: #f5f5f5;
				line-height: 70px;
				box-shadow: 1px 1px 10px #ccc;
				border-radius: 4px;	
				position: relative;	
				top: -65px;		
			}
			form {
				width: 800px;
				margin: 0 auto;
				position: relative;
			}
			input {
				width: 800px;
				height: 35px;
				padding-left: 15px;
				border: none;
			}
			form i {
				font-size: 28px;
				position: absolute;
				top: 0;
				right: 10px;
			}
			span {
				position: absolute;
				width: 48px;
				height: 48px;
			
				background: url(show.jpg) -64px 168px;
				right: 0;
			}
			.menu {
				width:1000px;
				height: 40px;
				line-height: 40px;
				margin: 20px auto;
				background:#f5f5f5;
			}
	   .menu a{
			 float: left;
			 text-align: center;
			 width: 10%;
			 font-weight: bold;
			}
		.three a{position: relative;}
	  .three a i{font-size: 12px;margin-left: 8px;}
	  .three  ul{width: 100px;box-shadow: 0 2px 5px #f5f5f5;position: absolute;}
	  .three  ul li{width: 100px;line-height: 40px;}
   
	</style>

</head>
<body>
	<div class="box">
		<form>
			<input type="text" placeholder="请输入关键词">
			<i class="layui-icon"></i>
		</form>
		<span></span>
	</div>
	<div class="menu one">
			<a href="">要闻</a>
			<a href="">国际</a>
			<a href="">国内</a>
			<a href="">社会</a>
			<a href="">军事</a>
			<a href="">娱乐</a>
			<a href="">体育</a>
			<a href="">汽车</a>
			<a href="">科技</a>
			<a href="">其他</a>
	</div>
	<div class="menu two" style="position: relative;">
			<a href="" name='0'>要闻</a>
			<a href="" name='1'>国际</a>
			<a href="" name='2'>国内</a>
			<a href="" name='3'>社会</a>
			<a href="" name='4'>军事</a>
			<a href="" name='5'>娱乐</a>
			<a href="" name='6'>体育</a>
			<a href="" name='7'>汽车</a>
			<a href="" name='8'>科技</a>
			<a href="" name='9'>其他</a>
			<div class="ba"style="position: absolute;width:100px;height: 3px;background:#ff6500;top: 37px; "></div>
	</div>
	<div class="menu three">
			<a href="">要闻</a>
			<a href="">国际</a>
			<a href="">国内</a>
			<a href="">社会</a>
			<a href="">军事</a>
			<a href="">娱乐</a>
			<a href="">体育</a>
			<a href="">汽车</a>
			<a href="">科技</a>
			<a href="">
				其他<i class="layui-icon layui-icon-up"></i>
				<ul>
					<li>你说</li>
					<li>你说</li>
					<li>你说</li>
					<li>你说</li>
				</ul>
			</a>
	</div>

	<!--  -->
	<script>
		$(function(){
			// 鼠标移入移出  box的left改变
			$('.box').hover(
				function(){
					$(this).stop().animate({top:'0px'}, 500);
				}, 
				function(){
					$(this).stop().animate({top:'-65px'}, 500);
				});

			// 搜索框获取焦点边框变色  失去焦点恢复原貌
			$('input').focus(function(){
				$(this).css('box-shadow','0 0 5px orange inset');
			});
			$('input').blur(function(){
				$(this).css('box-shadow','');
			});

			// 导航一
			$('.one a').hover(
				function(){
					$(this).css({
						"background-color":'#ff6500',
						'color':'#fff'
					});
				},
				function(){
					$(this).css({
						"background-color":'',
						'color':''
					});
				}
			);

			// 导航二
			$('.two a').hover(
					
					function(){
						var len = parseInt($(this).attr('name')) * $(this).width();
						$('.ba').stop().animate({left:len + 'px'},300);
					},
					function(){
						$('.ba').stop().animate({left:'0px'},400);
					}
			);

			// 导航三
			$('.three ul').hide();
			$('.three a').hover(
				function(){
					$(this).find('i').attr('class', 'layui-icon layui-icon-down');
					$(this).find('ul').slideDown(500);
				},
				function(){
					$(this).find('i').attr('class', 'layui-icon layui-icon-up');
					$(this).find('ul').slideUp(200);
				}
			);











		})
	</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:

1、动画都有参数(speed, callback)

2、自定义动画在应用时前面必须加stop()

3、案例较为简单没有特别的,布局还是有点慢

4、代码中对css attr 还有animate参数中的css{] 有点混淆,应该是 css单个css(“属性”,"值")多个css({“属性”:"值" ....})   attr单个attr('属性名','值') 多个attr({“属性”:"值" ....})  animate单个animate({属性:‘值’})多个在后面跟逗号

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学