Je fais une barre de navigation, lorsque l'utilisateur clique sur l'onglet de menu que l'image spécifique change, cela fonctionne bien. mais je veux que l'image soit fadeIn () quand elle change.

enter image description here

enter image description here

Ma jQuery

 $('#menu-cross').on('click',function(){
   var changeImage  = "images/navigation-icons/closemenu.png";
        $(this).attr('src', changeImage); 
 });

J'essayais

 $('#menu-cross').on('click',function(){
    var changeImage  = "images/navigation-icons/closemenu.png";
    $('#menu-cross').fadeIn(500 , function(){
      $(this).attr('src', changeImage); 
    });
 });

Mon Html

 <img src="images/navigation-icons/menu.png" id="menu-cross">
1
Daniel 22 juil. 2015 à 12:46

3 réponses

Meilleure réponse

Vous faites bien sauf que vous devez fadeOut avant fadein et changer le src dans fadeOut comme ci-dessous:

DEMO

var changeImage  = "https://cdn4.iconfinder.com/data/icons/geomicons/32/672366-x-128.png";
var originaImage = "https://cdn3.iconfinder.com/data/icons/lightly-icons/30/652841-menu-120.png";
$('#menu-cross').on('click',function(){
    $(this).fadeOut(500,function(){
      if($(this).attr('data-changed')=='true')
      {
          $(this).attr('src', originaImage).attr('data-changed','false');    
      }
      else
      {
           $(this).attr('src', changeImage).attr('data-changed','true');       
      }
    }).fadeIn(500);
 });

Mais je préfère cette solution de beauté here à partir de ce blog

2
Guruprasad Rao 22 juil. 2015 à 09:57

Essayez d'utiliser un fondu comme:

 $(this).attr('src', changeImage).fadeIn('slow'); 
0
Bhavin Solanki 22 juil. 2015 à 09:52

Votre image est également affichée, donc l'effet de fondu ne fonctionnera pas. afin que vous puissiez le cacher et l'afficher à nouveau

 $('#menu-cross').on('click',function(){
    var changeImage  = "images/navigation-icons/closemenu.png";
    $(this).attr('src', changeImage); 
    $('#menu-cross').fadeOut(0).fadeIn(500);
 });
1
Kamuran Sönecek 22 juil. 2015 à 09:56