Image animation de fondu lorsque le lien d'ancrage cliqué dans jquery

Je suis totalement nouveau à jquery et je n'ai pas trouvé exactement ce que je voulais donc je l'ai écrit par moi-même. L'objectif est de créer des animations d'évanouissement d'image (de l'image A à l'image B) lorsque le lien ci-dessus est cliqué.Image animation de fondu lorsque le lien d'ancrage cliqué dans jquery

De toute façon, son comportement n'est pas ce que je voudrais sauf .. il n'est pas assez lisse en cliquant rapidement/au hasard. Pourriez-vous s'il vous plaît en dire un mot? Je vous remercie!

C'EST L'EXEMPLE RUNNING:

JSFIDDLE EXAMPLE

CSS:

... 
.overlappingImage {position:absolute; left:0; top:0; display:none} 
...

Le code:

... 
<script type="text/javascript"> 

     function FadeToImage(event, to_image_name, speed) { 

     if (event != null) 
      event.preventDefault(); 

     var currentImgWrapper = $("#dummy"); 

     var currentImg = currentImgWrapper.find('img'); 
     if (currentImg != null) currentImg.removeClass("overlappingImage"); 

     var newImgHTML = '<div id="dummy">' + '<img id="to_upper_image" src="' + to_image_name + '" class="overlappingImage"/>' + '</div>'; 

     if (currentImgWrapper.html() == null) 
      $("#d").html(newImgHTML); 
     else $("#d").html(currentImgWrapper.html() + newImgHTML); 

     currentImgWrapper.fadeOut(speed); 
     $("#to_upper_image").fadeIn(speed); 

     $("#to_upper_image").removeAttr('id'); 
    } 

    $(document).ready(function() { 
     FadeToImage(null, 'img/1.JPG', 0);    

     $('a').first().click(function(event) { 
      FadeToImage(event, 'img/2.JPG', 1000); 
     }); 

     $('a').last().click(function(event) { 

      FadeToImage(event, 'img/3.JPG', 1000); 
     }); 

    }); 

    </script> 

</head> 
<body> 
    <a href="#">CLICK 1</a> <a href="#">CLICK 2</a> 
    <div id="d" style="position: relative; margin: 50px"> 
    </div> 
</body>

...

Source

2010-11-03 PaN1C_Showt1Me

Pour rendre l'animation plus fluide, vous devez uniquement exécuter les fondus suivants après chaque opération:

currentImgWrapper.fadeOut(speed, function() { 
    $("#to_upper_image").fadeIn(speed) 
         .removeAttr('id'); 
});

Source

2010-11-03 16:33:02

Image animation de fondu lorsque le lien d'ancrage cliqué dans jquery

Répondre

Questions connexes