php 动画导航条,导航栏动画测试

摘要：

&自定义导航栏

ul{

list-style-type: none;

position: relative;

}

ul li{

float: left;

padding: 8px 16px;

border: 1px solid #ff6500;

}

li a{

color: #000;

text-decoration: none;

}

#a2{

position: absolute;

left: 0;

top: 39px;

}

#a2 li{

width: 113px;

display: none;

}

// $(document).ready(function(){

//     // $('div').css('background','red')

//     $('li').hover(function(){

//         $('a1').css('display','block')

//     },function(){

//         $('ai').css('display','none')

//     })

// })

$(document).ready(function(){

$("#a1").hover(function(){

$('#a3').css("display","block")

},function(){

$('#a3').css("display","none")

})

})

• 鼠标按顺序移动
  • 测试
• 1
• 2
• 3
• 点击

总结：

1、发现animate不能做控制元素的背景颜色

2、用hover方法做的隐藏显示效果

不知道算不算是动画，用导航栏做的效果一时间想起来的是改变背景颜色还有隐藏显示二级菜单

批改老师：西门大官人批改时间：2019-02-17 09:05:56

老师总结：严格意义上来说，这不是动画，仅仅是用jquery控制了元素的css样式。