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

感謝您的幫助，這正是我需要它做的。我遇到的下一個問題是，當頁面加載時，第一個面板顯示爲「參考」，顯示爲打開。有沒有一種方法可以在頁面加載時隱藏，並在用戶鼠標懸停在「參考」之後顯示。但仍然保持相同的平滑上/下運動？ – 2010-05-12 20:08:33

我更新了上面的答案和演示（http://jsfiddle.net/U83Rd/1/），只需在初始化手風琴時將'collapsible：true，active：false'添加到選項中即可。 – Mottie 2010-05-12 20:30:34

謝謝，我真的很喜歡你用來做這件事的jsfiddle「在線渲染」。你是怎樣找到它的？ – 2010-05-14 12:58:18

手風琴中的每個項目都包含一個div.Title和一個div.links。每個包裹的手風琴項目的另一個DIV並應用懸停功能是：

<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讀取代碼的方式。它丟失標題部分並將「內容」稱爲標題。把它看作推動一切。此外，我只是尋找它褪色不透明不完全淡出。 – 2010-05-12 19:02:41

Jquery手風琴和褪色

回答

相關問題