jQuery FADEIN texte fadeout

Question

je ce au moment: (la liste est plus longue, mais cela est juste un élément)

<a href="Products.aspx" 
    onmouseover="onMouseOverCatDisplay(&quot;H5032.jpg&quot;, &quot;Go to: cars&quot;);"  
    onmouseout="onMouseOverCatDisplay(&quot;DSC_0414_SS.jpg&quot;, &quot;You see: bike&quot;);">Car</a> 

et au-dessus du html, j'ai ce javascript:

<script type="text/javascript" language="javascript"> 
// <![CDATA[ 
function onMouseOverCatDisplay(catimg, catnaam) 
{ 
    $("#lh").stop().animate({ color: "#1C1C1C" }, 2000); 
    $("#lh").html(catnaam); 
    $("#lh").stop().animate({ color: "#DBDBD6" }, 2000); 

    $("#imgCat").attr("src", catimg); 
} 
// ]]> 
</script> 

et ceci:

<h4 id="lh">Bikes</h4> 
<img id="imgCat" src="img/bike.jpg" /> 

maintenant tout fonctionne très bien, mais l'animation ne fonctionne pas.

Je voudrais effacer le h4, remplacer le texte, puis disparaître avant.

EDIT définir la source d'image aussi avec jQuery au lieu de javascript

EDIT2

réécrit la pièce pour qu'elle n'utilise pas le mouseout et le mouseover pour déclencher le javascript. mais ne peut pas trouver un moyen de passer une autre paramter à la jquery (l'image)

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('div.divLeftCatMenu a').hover(
     function() { 
      $(this).stop().animate({ color: '#E90E65', borderBottomColor: '#E90E65' }, 1000); 
      var catn = $(this).attr('title'); 
      $("#lh").html(catn); 
     }, 
     function() { 
      $(this).stop().animate({ color: '#CCC6C6', borderBottomColor: '#3e3e3e' }, 1000); 
      var catn = $("a.subCatLinksSelected").attr('title'); 
      $("#lh").html(catn); 
     }); 

Answer 1

Démo finale: http://jsfiddle.net/VdFD9/

Si vous souhaitez le faire en utilisant l'attribut title, il suffit de modifier le code ci-dessous et définir vos attributs de titre sous forme de liens de référence (image links si vous souhaitez).

HTML:

<a class="subCatLinksSelected" href="#" style="cursor:pointer;" title="cars"> cars </a> &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; 
<a class="subCatLinksSelected" href="#" style="cursor:pointer;" title="bikes"> bikes</a> 
<br /> 
<br /> 
<h4 id="lh">Bikes</h4> 

<img id="ctl00_ContentPlaceHolder1_men_imgCat" src="http://www.gravatar.com/avatar/6dec5eb240c49d979542d7cef64e9a8d?s=128&d=identicon&r=PG" /> 

javascript:

var arr = []; 
arr[0] = "http://www.gravatar.com/avatar/6dec5eb240c49d979542d7cef64e9a8d?s=128&d=identicon&r=PG"; 
arr[1] = "http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG"; 
arr[2] = "http://www.gravatar.com/avatar/54d38793d7a407446999b33b81d607fd?s=128&d=identicon&r=PG"; 

//for instance i'm using an array to cache your image links 
//if you can want these links as your anchor tag "title" attrib just modify the below code 

$(document).ready(function() { 

    var which_image = null; //detect which Image to use 
     $(".subCatLinksSelected").hover(function() { 

      var catn = $(this).attr('title'); 
      if(catn == 'cars') {   
       which_image = arr[1]; 
      } else { 
       which_image = arr[2]; 
      }  
      onMouseOverCatDisplay(which_image, 'Go to: ' + catn,'#0099f9'); 

     },function() { 

      var catn = $("a.subCatLinksSelected").first().attr('title'); 
      which_image = arr[0] 
      onMouseOverCatDisplay(which_image,'You see: ' + catn, '#000'); 

     }); 
    }); 


function onMouseOverCatDisplay(catimg, catnaam, color) { 

    $('#ctl00_ContentPlaceHolder1_men_imgCat').attr('src',catimg); 

    $("#lh") 
     .css({opacity:0.2,color:"#1c1c1c"}) 
     .html(catnaam) 
     .css({color: color}) 
     .stop() 
     .animate({opacity:1 },2000); 
    } 

Answer 2

Pour commencer, vous utilisez jQuery, mais attachés les événements comme les appels de fonction javascript en ligne. Ne fais pas ça. Associez votre événement à vos objets DOM dans la fonction jQuery de document prêt.

Ensuite, vous utilisez "document.getElementById" ce qui est bien, mais pourquoi ne pas simplement utiliser un sélecteur jQuery standard pour être cohérent (qui, à son tour, va utiliser getElementById pour vous). Enfin, ce qui se passe probablement, c'est que votre fonction appelle deux animations en même temps. Ce que vous voulez, c'est que la deuxième animation ne se produise qu'après la fin du premier. Pour cela, vous voulez appeler la première animation, puis appelez le swap html et la deuxième animation via une fonction de rappel dans le premier. Consultez la documentation pour un exemple:

http://api.jquery.com/animate/

Enfin, tout en animant la couleur est très bien, vous pouvez préférer utiliser à la place fadeIn et fadeOut.

MISE À JOUR:

En outre, vous avez ceci:

onmouseover="onMouseOverCatDisplay("H5032.jpg", "Go to: cars");"  

Essayez ceci:

onmouseover="onMouseOverCatDisplay('H5032.jpg', 'Go to: cars');"  

Answer 3

Avez-vous essayé

$("#lh").stop().animate({ color: "#1C1C1C" }, 2000, function() { 
    $("#lh").html(catnaam); 
    $("#lh").stop().animate({ color: "#DBDBD6" }, 2000); 
}); 

Parce que je pense que les deux animations sont chevauchement eac Hother. De cette façon, le second commencera après que le premier est terminé.

Answer 4

$(document).ready(function() { 
    $('div.divLeftCatMenu a').hover(
    function() { 
     $(this).stop().animate({ color: '#E90E65', borderBottomColor: '#E90E65' }, 1000); 
     var catn = $(this).attr('title'); 
     $("#lh").html(catn); 
    }, 
    function() { 
     $(this).stop().animate({ color: '#CCC6C6', borderBottomColor: '#3e3e3e' }, 1000); 
     var catn = $("a.subCatLinksSelected").attr('title'); 
     $("#lh").html(catn); 
    }); 

devrait fonctionner, mais si vous voulez accéder à l'image que vous aurez besoin il de se lier à chaque fonction ... essayez ceci:

$ (document) .ready (function() { $ ('div.divLeftCatMenu a') .hover ( function() { $ (this) .stop(). Animé ({color: '# E90E65', borderBottomColor: '# E90E65'}, 1000); var catn = $ (this) .attr ('title'); $ ("# lh"). Html (catn); } .bind ($ (certains sélecteur pour votre image)), fonction () { $ (this) .stop() animer ({color:. '# CCC6C6', borderBottomColor: '# 3e3e3e' }, 1000); var catn = $ ("a.subCatLinksSelected"). Attr ('title'); $ ("# lh"). Html (catn); } .bind ($ (certains sélecteur pour votre image)));

Vous serez alors en mesure d'accéder à l'image dans chaque fonction à l'aide cette, comme this.src