我想hover时 菜单平滑收回去，怎么实现啊_html/css_WEB-ITnose
怎样hover 出 list 时 平滑的收回去啊
示例是这个
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/reset.css"/> <style> </style></head><body><div id="header"> <div id="nav"> <div id="logo">IUX</div> <div class="list"> <ul> <li class="bar" id="bar1"> <a href="###">Home</a></li> <li class="bar" id="bar2"> <a href="###">Product</a></li> <li class="bar" id="bar3"> <a href="###">Desiger</a></li> <li class="bar" id="bar4"> <a href="###">Blog</a></li> <li class="bar" id="bar5"> <a href="###">About</a></li> </ul> </div> </div></div></body><script src="../jquery.min.js"></script><script SRC="../easing.js"></script><script>$(function(){ window.onload=function(){ //code $("#logo").animate( {"top":"0px", "opacity":1 }, { easing: 'easeOutElastic', duration: 1800 } ) }/*$("#logo").hover(function(){ $(".bar").addClass("init1")})*/ $("#logo").hover(function(){ $("#bar1").addClass("test").animate({ "top":"40px" }, { easing: 'easeInOutQuint', duration: 200, compete:function(){ } }), $("#bar2").addClass("test").animate({ "top":"40px" }, { easing: 'easeInOutQuint', duration: 250 }), $("#bar3").addClass("test").animate({ "top":"40px" }, { easing: 'easeInOutQuint', duration:280 }), $("#bar4").addClass("test").animate({ "top":"40px" }, { easing: 'easeInOutQuint', duration: 310 }) $("#bar5").addClass("test").animate({ "top":"40px" }, { easing: 'easeOutBounce', duration: 330 }) }),function(){ alert("jjjj"); $(".bar").removeClass("test"); $(".bar").removeAttr("style") }})</script></html>
回复讨论(解决方案)
下面是css
[code=css][/ a{
text-decoration: none;
color: #333333;
}
.bar{
list-style: none;
width:150px;
height:40px;
line-height: 40px;
font: "Microsoft YaHei",tahoma,arial,Hiragino Sans GB,\5b8b\4f53;
transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
border-bottom-left-radius: 8%;
/*border-bottom-right-radius: 5%;*/
top:40px;
display: none;
position: absolute;
}
.bar:hover {
height:60px;
/*line-height: 60px;*/
}
#bar1{
background: rgba(255, 106 ,106,0.5);
}
#bar2{
background: rgba(106, 90 ,205,0.5);
}
#bar3{
background: rgba(127, 255, 0,0.5);
}
#bar4{
background: rgba(99 ,184, 255,0.5);
}
#bar5{
background: rgba(144 ,238 ,144,0.5);
}
.list{
position: relative;
width:150px;
/*height:200px;*/
}
.init1{
position: relative;
display:block;
}
#logo{
background: rgba(0,0,0,0.8);
width:150px;
height:40px;
position: absolute;
display: block;
top:-40px;
color:#ffffff;
}
.test{
display:block;
top:-40px;
position: relative;
}
code]
手中没有easing.js，，，运行不了楼主的代码，，，不过可以给楼主一点提示。。。
jquery的动画，，，，怎么动出来，，，，就可以怎么动回去。。。。
e.g.:
拉宽：$("id").animate({width:'51px'});
缩回：$(“id”).animate({width:'0px'});
window.onload=function(){
//code
$("#logo").animate(
{"top":"0px",
"opacity":1
}, {
easing: 'easeOutQuart',
duration: 1800
}
)
$("#logo").addClass("shake");
}
//css 版本
$("ul").hover(function(){
$(".bar").addClass("translate1");
},function(){
$(".bar").removeClass("translate1");
})
不会写，但可以给你思路：
第一种：平滑展出后，紧跟着一个function，让list收回。
第二种：hover list展出，hover list父层就收回
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7555
15
1384
52
83
11
59
19
28
96
& lt; Progress & Gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:34 PM
이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우
& lt; datalist & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:33 PM
이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159
& lt; meter & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:35 PM
이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?
Mar 20, 2025 pm 05:56 PM
이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.
& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?
Mar 20, 2025 pm 06:05 PM
이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.
HTML은 초보자를 위해 쉽게 배우나요?
Apr 07, 2025 am 12:11 AM
HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML의 시작 태그의 예는 무엇입니까?
Apr 06, 2025 am 12:04 AM
anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
