Jquery 아코디언 및 페이딩

페이지가로드 될 때 아코디언의 헤더를 페이드 아웃하는 jquery 아코디언을 만들려고합니다. 마우스를 가리키면 페이드 인합니다. 마우스가 움직일 때 아코디언이 열립니다. 이 모든 작업을 수행 할 수 있는데, 아코디언이 헤더 이동을 열어 마우스가 더 이상 불이 들어오지 않을 때 문제가 발생합니다. 마우스가 머리글 자체에있는 것처럼 머리글을 밝게 유지하는 링크를 원합니다. 아래는 내가 작성한 코드입니다.Jquery 아코디언 및 페이딩

<html> 
<head 
<script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-1.4.2.min.js'></script> 

<script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-custom-181/jquery-ui-1.8.1.custom.min.js'></script> 
</head> 

<body bgcolor="black"> 

<style = "css/text"> 

.links { 
     font-family: "Georgia", "Verdana", serif; 
line-height: 30px; 
     margin-left: 20px; 
margin-top: 5px; 
     } 

.Title { 
     font-family: "Geneva", "Verdana", serif; 
font-weight: bold; 
font-size: 2em; 
text-align: left; 
font-variant: small-caps; 
border-bottom: solid 2px #25FF00; 
padding-bottom:5px; 
margin-bottom: 10px; 
} 

</style> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".Title").fadeTo(1,0.25); 
$(".Title").hover(function() { 
    $(this).stop().fadeTo(250,1) 
    .closest(".Title").find(".links").fadeTo(250,0.75); 
}, 
function() { 
$(this).stop().fadeTo(250,0.25); 
}); 
}); 

$(function() { 
$("#accordion").accordion({ 
    event: "mouseover" 
}); 
}); 

</script> 
<p>&nbsp</p> 
<div id="accordion"> 

<div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #25FF00;">Reference</a></div> 
<div class="links"> 
<a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #25FF00;">Jquery Documentation/Help</a><br> 
<a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #25FF00;">Stack Overflow</a><br> 
<a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #25FF00;">w3schools.com</a><br> 
</div> 

<div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #FF7200;">Gaming</a></div> 
<div class="links"> 
<a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #FF7200;">Jquery Documentation/Help</a><br> 
<a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #FF7200;">Stack Overflow</a><br> 
<a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #FF7200;">w3schools.com</a><br></div> 

<div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Grub</a></div> 
<div class="links"> 
<a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Jquery Documentation/Help</a><br> 
<a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Stack Overflow</a><br> 
<a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">w3schools.com</a><br> 
</div> 

<div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #F8FF00;">Drinks</a></div> 
<div class="links"> 
<a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #F9FF00;">Jquery Documentation/Help</a><br> 
<a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #F8FF00;">Stack Overflow</a><br> 
<a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #F8FF00;">w3schools.com</a><br> 
</div> 
</div> 

</body> 
</html>

출처

2010-05-12 Slick Willis

은 여기 ... 당신을 위해 a demo을 게시 내가 사용하는 스크립트입니다 :

$(function() { 
    $("#accordion").accordion({ 
     event: "mouseover", 
     collapsible: true, 
     active: false 
    }); 
    // Fade out all Titles except for the active one 
    $(".Title:not(.ui-state-active)").fadeTo(1,0.25); 
    $(".Title").hover(function() { 
     $(this).stop().fadeTo(250,1) 
      .closest(".Title").find(".links").fadeTo(250,0.75); 
    }, function() { 
     // Fade out all titles except the active one 
     $(".Title:not(.ui-state-active)").fadeTo(1,0.25); 
     // Make sure the active title is faded in 
     if ($(this).is('.ui-state-active')) { 
      $(this).stop().fadeTo(250,1); 
     } 
    }); 
});

출처

2010-05-12 19:55:15 Mottie

도움을 주셔서 감사합니다. 제가해야 할 일이었습니다. 다음 문제는 페이지가로드 될 때 "참조"라고 표시된 첫 번째 패널이 열려있는 것입니다. 사용자가 "참조"위로 마우스를 이동 한 후 페이지가로드되고 표시 될 때 숨겨진 상태로 유지할 수있는 방법이 있습니까? 그러나 여전히 똑같은 매끄러운 위/아래 동작을 유지합니까? –

위의 답변과 데모 (http://jsfiddle.net/U83Rd/1/)를 업데이트했으며 아코디언을 초기화 할 때 옵션에'collapsible : true, active : false'를 추가하십시오. – Mottie

감사합니다. jsfiddle "온라인 렌더링"을 정말 좋아합니다. 어떻게 찾았 니? –

아코디언의 각 항목은 div.Title과 div.links로 구성됩니다. 다른 사업부에서 그 아코디언의 각 항목을 감싸고 그에게 가져가 기능을 적용

<div class="accordionItemWrap"> 
    <div class="Title"><a href="#" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Grub</a></div> 
    <div class="links"> 
     <a href="#" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Jquery Documentation/Help</a><br> 
     <a href="#" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Stack Overflow</a><br> 
     <a href="#" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">w3schools.com</a><br> 
    </div> 
</div>

JS :

$(document).ready(function(){ 
    $(".Title").fadeTo(1,0.25); 
    $(".accordionItemWrap").hover(
     function() { 
      $(this).find('.Title').fadeIn(); 
      $(this).find(".links").fadeIn(); 
     }, 
     function() { 
      $(this).find('.Title').fadeOut(); 
      $(this).find(".links").fadeOut(); 
     } 
    ); 
});

출처

2010-05-12 18:47:28 Jage

jquery가 코드를 읽는 방식 때문에 작동하지 않습니다. 헤더 부분을 잃어 버리고 "내용"을 헤더로 호출합니다. 모든 것을 밀어 내려는 것으로 생각하십시오. 또한 나는 단지 불투명하지 않게 페이드 아웃하기 위해 그것을 찾고 있습니다. –

Jquery 아코디언 및 페이딩

답변

관련 문제