Fade in/out, l'événement mouseover

Question

Je cherche à mettre en œuvre un événement mouseover sur ma page pour un menu -

J'ai 3 titres à la gauche avec un div de contenu respectif à droite où le texte correspondant apparaît.

Après avoir trauled tous les forums pour une solution js de travail, je me suis installé avec:

http://flowplayer.org/tools/demos/tabs/mouseover.html

qui utilise une fonction js très simple:

$("#products").tabs("div.description", {event:'mouseover'}); 

Ce que j'espère faire cependant, est d'incorporer un effet fadeIn(), fadeOut de sorte que lorsque l'utilisateur survole un titre sur la gauche de la page, le contenu existant s'affaiblit et le contenu de la prévisualisation apparaît progressivement pour afficher ......

Le codage html est:

<div id="products" > 

<img src="home.png" alt="home" /> 

<img src="services.png" alt="services" /> 

<img src="contact.png" alt="contact" /> 

</div> 

<div class="description" id="home" > 
.. content .. 
</div> 

<div class="description" id="services" > 
.. content .. 
</div> 

<div class="description" id="contact" > 
.. content .. 
</div> 

J'ai essayé d'incorporer fil 5.404.775 sur ce site, mais ne pouvez pas le faire fonctionner!

Toute aide appréciée

Answer 1

Je travaille hors l'hypothèse que vous voulez que les gens qui planent sur les boutons d'image ici pour faire les divs correspondants fanent dedans et dehors. Ce qu'ils font sur ce site ne fonctionnera pas car Javascript est nécessaire pour l'effet de fondu. JQuery rend cela facile. Je recommande d'essayer quelque chose comme

<script type="text/javascript"> 
oldSelected = "home" 
$(document).ready(function(){ 
    $("#products img").mouseover(function(){ 
    $(".description").stop(true, true); 
    var newSelected = $(this).attr("alt"); 
    $("#" + oldSelected).fadeOut('normal',function(){ 
     $("#" + newSelected).fadeIn(); 
    }); 
    oldSelected = newSelected 
    }); 
}); 
</script> 

Je l'ai testé et il fonctionne. Une chose que vous voulez vous assurer est que le CSS pour les divs les a mis à ne pas être visible au début, sauf si vous voulez que l'un d'entre eux soit visible, auquel cas l'ID de cette div devrait être ce que vous avez au début de la fonction.

Profitez-en!

Answer 2

Cela pourrait fonctionner:

$("img", "#products").hover(function() { 

    var id = $(this).attr("alt"); 
    $("#" + id).fadeIn("slow"); 

}, function() { 

    var id = $(this).attr("alt"); 
    $("#" + id).fadeOut("slow"); 

}); 

Answer 3

Le ci-dessous peut être vu sur jsfiddle.

Vous pouvez les effacer et sur mouseover comme celui-ci

var _current = "home"; // default state 

$('#products img').mouseover(function(){ 

    // The one we want to show now 
    var id= $(this).attr('alt'); 

    // We don't need to do anything if it's the same one that's already 
    // there 
    if (_current !== id){ 

     $('#' + _current).fadeOut(function(){ 
      // Fade in the new one after the old fades out 
      $('#' + id).fadeIn(); 
      // Update state 
      _current = id; 
     }); 
    } 
}); 

J'ai aussi ajouté quelque chose à faire en sorte que seul celui que vous voulez afficher en premier est affiché lorsque la page se charge. Je suppose que ce serait la maison div.

Ajouter ce au CSS

.hidden{ 
    display:none; 
} 

et mettre cette classe sur les autres divs.

<div class="description hidden" id="services" > 
.. services.. 
</div> 

<div class="description hidden" id="contact" > 
.. contact .. 
</div> 

Answer 4

Une autre idée (sans Jquery): vous pouvez utiliser CSS opacity:x propriété (pour Firefox) ou filter:alpha(opacity=x) (pour IE) pour modifier l'opacité d'un élément. Le fondu entrant/sortant peut être obtenu avec un petit cycle ralenti.

Voir aussi:

http://www.w3schools.com/css/css_image_transparency.asp