jquery菜单动画效果 

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").hover(function(){
    $("div").stop().animate({
      top:'70px',
      opacity:'1',
      //height:'150px',
      //width:'150px'
    });
  },function(){
      $("div").stop().animate({
      top:'100px',
      opacity:'0',
      //height:'150px',
      //width:'150px'
      });
  });
});
</script> 
</head>
 
<body>

<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute; opacity: 0; top: 100px;">
</div>

</body>
</html>

222222

<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}

.nav{ width:1000px; margin:0 auto; overflow:hidden;}
.nav ul li{ height:40px; line-height:40px; float:left; padding:10px 5px; margin:0px 5px;position:relative;}
.nav ul li a{ color:#666; font-family:'Microsoft Yahei'; font-size:14px; text-decoration:none;}
.nav ul li a:hover{ color:#000; text-decoration:none;}
#koyoz{ display:block; position:absolute; width:100px; height:2px; background:#1FAEFF;}
</style>

<div class="nav">  
        <!-- 菜单 -->  
        <ul>  
            <li><a href="javascript://">aaaaa</a></li>  
            <li><a href="javascript://">bbbbb</a></li>  
            <li><a href="javascript://">ccccc</a></li>  
            <li><a href="javascript://">ddddd</a></li>  
            <li><a href="javascript://">eeeee</a></li>  
            <li><a href="javascript://">fffff</a></li>  
        </ul>  
        <!-- 用于动画的层 -->  
        <div id="koyoz"></div>  
    </div>  
<script   src="https://code.jquery.com/jquery-1.12.4.js"   integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="   crossorigin="anonymous"></script>

<script type="text/javascript">
$(function(){   
    //alert($(".nav").offset());
    $(".nav a").mouseover(function() {   
        var left = $(this).offset().left - $(".nav").offset().left;   
        var fly = $("#koyoz");   
        if (fly.is(":animated")) {   
            fly.stop();   
        }   
        fly.animate({   
            marginLeft:left   
        }, 500);   
    })   
})  
</script>

　　

posted @ 2017-10-25 22:04  Adtuu  阅读(178)  评论(0)    收藏  举报