Jquery accordéon et fading

StackOverflow https://stackoverflow.com/questions/2821731

Question

Je suis en train de créer un accordéon jquery qui se fane l'en-tête de l'accordéon lorsque la page est chargée alors il apparaît en fondu lorsque les survols de souris. L'accordéon s'ouvre également lorsque les survols de souris. Je suis en mesure d'obtenir tout ce travail, le problème que j'ai est quand l'accordéon ouvre l'en-tête se éloigne et la souris n'est plus sur elle pour le garder allumé Je voudrais les liens pour garder l'en-tête éclairé ainsi que si la souris est sur l'en-tête lui-même. Voici le code que je l'ai écrit pour lui. 

<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>
Était-ce utile?

La solution

une démo pour vous ... voici le script je: 

$(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);
        }
    });
});

Autres conseils

Chaque élément de votre accordéon se compose d'un div.Title et un div.links. Enveloppez chacun de ces éléments d'accordéon dans un autre div et appliquer votre fonction vol stationnaire que: 

<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();
        }
    );
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top