Afficher et masquer Div onMouseOver

Hé les gars, j'ai besoin d'un peu d'aide ici, c'est très proche de ce que je veux, mais pas tout à fait.Afficher et masquer Div onMouseOver

Je souhaite que les liens texte que je survole permettent d'animer du texte caché dans une div cible. Donc, lorsque je survole le lien A, ce texte apparaît; quand je passe la souris sur la liaison B, le texte précédent se efface et le nouveau texte apparaît en fondu

Voici mon javascript.

<script type="text/javascript"> 
function ShowHide(){ 
    $("#textMessages").animate({"height": "toggle"}, { duration: 1000 }); 
    } 
</script>

Voici mes liens:

<a onMouseOver="ShowHide(); return false;" href="#">Message A</a> 

<a onMouseOver="ShowHide(); return false;" href="#">Message B</a> 

<a onMouseOver="ShowHide(); return false;" href="#">Message C</a>

Et voici mon div cible avec des extraits de texte à effet de fondu sur:

<div id="textMessages"> 

<div id="defaultMessage"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit 
</div> 

<div id="MessageA"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit 
</div> 

<div id="MessageB"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit 
</div> 

<div id="MessageC"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit 
</div> 

</div>

Je suppose que je devrai régler le # MessageA/B/C displa y: none

Source

2011-01-18 brianrhea

Voici un jsFiddle qui fait ce que je pense que vous essayez de faire.

http://jsfiddle.net/rcravens/md3Xe/

Si c'est pas, s'il vous plaît fournir des informations supplémentaires.

Bob

Source

2011-01-18 21:13:01 rcravens

Bingo est-il un moyen d'animer le texte.!? FadeIn/Out SlideUp/Down? – brianrhea

Bien sûr, vous pouvez utiliser 'fadeIn' et 'fadeOut' au lieu de 'show'/'hide' Voici un exemple utilisant 'slideDown'/'slideUp' http: // jsfiddle. net/rcravens/md3Xe/6/ – rcravens

Merci, c'est tout L parfait sauf que je pense que je n'étais pas clair sur le defaultMessage. C'est ce qui devrait être affiché lors de la première visite de l'utilisateur, mais dès qu'il survole, il disparaît et ne réapparaît que si rien d'autre n'est en état stationnaire. Merci pour votre aide déjà! – brianrhea

j'ai "amélioré" la réponse par rcravens

http://jsfiddle.net/md3Xe/3/

Source

2011-01-18 21:18:36 alfred

C'est également bon, Alfred ... pouvez-vous le configurer pour que defaultMessage s'affiche quand il n'y a pas d'état hover et disparaît lorsque l'un des liens est survolé? – brianrhea

Voici mon offre:

$(function(){ 
    var slideOut = null; 
    $('#textMessages').slideUp(1000); 
    $('#textMessages,.textMessagesLink').hover(function(){ 
     $("#textMessages").slideDown(1000); 
     if (slideOut != null) { 
      clearTimeout(slideOut); 
      slideOut = null 
     } 
    },function(){ 
     slideOut = setTimeout(HideHide,1000); 
    }); 
    function HideHide(){ 
     $('#textMessages').slideUp(1000); 
    } 
});

a tiré profit d'une minuterie à le faire. En outre, fait petit changement à vos liens (a ajouté une classe pour référence) et fait tant que vous passez la souris sur le div, le div restera également visible (facilement modifié en prenant le '#textMessages', sur le sélecteur .hover() .

exemple de travail: http://www.jsfiddle.net/bradchristie/zgbfa/1/ un autre exemple de prendre « divs de contenu » en considération: http://www.jsfiddle.net/bradchristie/zgbfa/3/ (peut jouer avec defaultDiv si vous voulez aussi bien

Source

2011-01-18 21:24:03

Afficher et masquer Div onMouseOver

Répondre

Questions connexes