Jquery Accordion and Fading
I am trying to create a jquery accordion that fades the header of the accordion out when the page is loaded then fades it in when the mouse hovers. The accordion also opens when the mouse hovers. I am able to get all of this working, the problem I am having is when the accordion opens the header moves away and the mouse is no longer on it to keep it lit. I would like the links to keep the header lit as well as if the mouse is on the header itself. Below is the code that I wrote for it.
<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> </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: 开发者_JAVA技巧#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>
I posted a demo for you... here is the script I used:
$(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);
}
});
});
Each item in your accordion consists of a div.Title and a div.links. Wrap each of those accordion items in another div and apply your hover function to that:
<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();
}
);
});
加载中,请稍侯......
精彩评论