jquery problème de fondu

Question

Ce script définit une couleur au hasard sur le corps et un div et devrait simplement disparaître entre eux:

function randcolor(){ 
return ('#' + (~~(Math.random() * 16777215)).toString(16)) 
} 

var $body = $("body"), 
    $div = $("<div style='display:none; position: absolute; top:0; right:0; bottom:0; right:0;'></div>") 

function havefun(){ 
    $body.css("background", randcolor()).append($div); 
    $div.fadeIn(1000); 

    setTimeout(function(){ 
     $div.fadeOut(500, function(){ $div.remove().css("background", randcolor()).hide(); havefun(); }) 
    }, 1500); 
} 

havefun() 

mais il n'y a pas fondu mon changement de couleur se produit instantanément. Quelqu'un peut-il aider? Vous pouvez voir un working example.

Answer 1

Si vous voulez juste faire un fondu entre les divs et l'arrière plan, qu'en est-il de http://jsfiddle.net/K2BF3/? J'ai foiré le code de changement de couleur et un timeout, mais le fondu semble fonctionner ...

Mise à jour: Je ne suis pas sûr de ce que je fais moi-même (pourquoi tous ces appels récursifs s'il y a setInterval?), mais http://jsfiddle.net/K2BF3/3/ affiche des fondus encore meilleurs.

Mise à jour: Je sais déconner incorrectement avec jsfiddle, mais http://jsfiddle.net/KLN24/ est finalement une transition en douceur.

Answer 2

You need jQuery color plugin to fade background colors.

Answer 3

La raison pour laquelle vous ne pouvez pas animer le fondu des couleurs « nativement » sans plug-in est que JQuery ne peut pas ajuster progressivement la valeur de la propriété ciblée sur l'élément css. Toute propriété CSS qui a une unité hexadécimale ou un autre codage non entier/décimal aura exactement le même problème. JQuery consiste simplement à décrémenter/incrémenter des valeurs pour obtenir les effets de fondu et les animations. Utilisez le plugin de couleur JQuery comme suggéré par Sarfraz.

Edit:

vous manquent le point ... l'effet de fondu repose sur la capacité d'ajuster certaines propriétés CSS. Très probablement, vous changez la couleur est en conflit avec les tentatives d'effets pour modifier l'opacité et d'autres propriétés CSS.