Jquery Accordéon et Fading

J'essaye de créer un accordéon de jquery qui fade l'en-tête de l'accordéon quand la page est chargée puis l'atténue quand la souris plane. L'accordéon s'ouvre également lorsque la souris plane. Je suis capable de faire fonctionner tout ça, le problème que j'ai est quand l'accordéon ouvre l'en-tête s'éloigne et la souris n'est plus dessus pour le garder allumé. Je voudrais que les liens gardent l'en-tête allumé aussi bien que si la souris est sur l'en-tête elle-même. Voici le code que j'ai écrit pour cela.Jquery Accordéon et Fading

<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>

Source

2010-05-12 Slick Willis

j'ai posté a demo 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); 
     } 
    }); 
});

Source

2010-05-12 19:55:15 Mottie

Merci pour l'aide c'est exactement ce que j'avais besoin de faire. Le prochain problème que j'ai est que le premier panneau, intitulé "Reference", est montré ouvert quand la page se charge. Y at-il un moyen que je peux avoir caché lorsque la page se charge et afficher après l'utilisateur souris sur "Référence". Mais gardez toujours le même mouvement de haut en bas? –

J'ai mis à jour ma réponse ci-dessus et la démo (http://jsfiddle.net/U83Rd/1/), il suffit d'ajouter 'collapsible: true, active: false' aux options lors de l'initialisation de l'accordéon. – Mottie

Merci, j'aime vraiment le "rendu en ligne" jsfiddle que vous avez utilisé pour le faire. Comment avez-vous trouvé? –

Chaque article de votre accordéon est constitué d'un div.Titre et d'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(); 
     } 
    ); 
});

Source

2010-05-12 18:47:28 Jage

Cela ne fonctionne pas à cause de la façon dont jquery lit le code. Il perd la partie d'en-tête et appelle le "contenu" comme en-tête. Pensez-y comme tout pousser vers le bas. Aussi, je suis juste à la recherche d'un fondu à une opacité pas complètement disparaître. –

Jquery Accordéon et Fading

Répondre

Questions connexes