zoukankan      html  css  js  c++  java
  • jquery模仿css3延迟效果

    HTML

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <script type="text/javascript" src="jquery.js"></script>
    <link href="" rel="stylesheet">
    </head>
    <style type="text/css">
    	.nav {
    		200px;
    		position: fixed;
    		right:0px;
    		top:50%;
    	}
    	.nav a{
    		200px;
    		height:40px;
    		line-height: 40px;
    		background: orange;
    		display: block;
    		text-align: left;
    		text-indent: 10px;
    	    right:-160px;
    
    		color:#fff;
    		position: relative;
    
    	}
    	.nav a:nth-of-type(odd){
    		background:#cecece;
    	}
    </style>
    <body>
        <div class="nav">
        	<a href="">1</a>
        	<a href="">2</a>
        	<a href="">3</a>
        	<a href="">4</a>
            <a href="">5</a>
        	<a href="">6</a>
        </div>
    </body>
    </html>
    

    JQUERY

    <script type="text/javascript">
    	var _nav = $('.nav');
    	var _temp;
    	_nav.hover(function(){
              $nav = $(this);
              _temp = setTimeout(function(){
              	$nav.find('a').each(function(i){//每个都执行相同的函数,如果没有延迟settimeout就没有延迟效果
              		var $a = $(this);
              		setTimeout(function(){
              			$a.animate({'right':0},200)
              		},50*i)//关键
              	})
              },100);//其实这个函数可以不要,只是为了平缓过渡吧
    	},function(){
    		if(_temp){clearTimeout(_temp)};
            $nav = $(this);
            _temp = setTimeout(function(){
              	$nav.children('a').each(function(i){
              		var $a = $(this);
              		setTimeout(function(){
              			$a.animate({'right':'-160'},200)
              		},50*i)
              	})
            },100);
    	})
    </script>
    

      

  • 相关阅读:
    如何显示Mac中文件的路径(path)
    什么样的音符对听起来悦耳?
    如何用iMovie剪辑视频
    【转】基因的故事
    4阶魔方解决方案
    SQ1魔方解决方案
    如何将Wikipedia链接的Unicode编码转成百分号编码
    我喜欢的LaTex编辑器
    react(redux)
    React (高阶组件)
  • 原文地址:https://www.cnblogs.com/bestsamcn/p/5056294.html
Copyright © 2011-2022 走看看