police Swap et la couleur de fond en utilisant jQuery

Question

j'afficher plus de 40 cases sur une page:

<div id="primary"> 
    <div class="box" style="background:...."> 
     <a href="" style="color:....">box1</a> 
    </div> 
    <div class="box" style="background:...."> 
     <a href="" style="color:....">box2</a> 
    </div> 
    .... 
</div> 

Comme vous pouvez le voir, je mise en couleur de fond et texte couleur. Sur vol stationnaire Je veux échanger les couleurs:

 $(".box").each(function() { 
      $(this).data('baseColor',$(this).css('background-color')); 
      $(this).find('a').data('fontColor',$(this).css('color')); 
      $(this).hover(function() { 
      $(this).animate({ backgroundColor: 
         $(this).data('fontColor') }, 500); 
      },function() { 
      $(this).animate({ backgroundColor: 
         $(this).data('baseColor') }, 1000); 
      }); 
     }); 

L'animation des œuvres couleurs d'arrière-plan, mais je ne peux pas changer la couleur de la police du un élément. Des idées?

Answer 1

Comme @Brandon mentionné, vous avez besoin jQuery UI (ou quelque chose;) pour animer les propriétés non entières.

Le plus gros problème est le changement de contexte dans votre each rappel: à l'intérieur des méthodes de rappel hover, la valeur de this ne sera pas toujours ce que vous voulez. En outre, la création de nouveaux objets jQuery (avec $(...)) est relativement coûteuse. Essayez:

var cssBox = { 
    backgroundColor: $('.box').css('background-color'), 
    color: $('.box').css('color') 
}; 

var cssLink = { 
    backgroundColor: $('.box > a').css('background-color'), 
    color: $('.box > a').css('color') 
}; 

$(".box").each(function() { 
    var $this = $(this), 
     $this_a = $this.children('a'); 

    $this.data('baseColor', $this.css('background-color')); 
    $this.data('fontColor', $this_a.css('color')); 
    $this.hover(function() { 
     $this.animate(cssLink, 500); 
     $this_a.animate(cssBox, 500); 
    }, function() { 
     $this.animate(cssBox, 1000); 
     $this_a.animate(cssLink, 1000); 
    }); 
}); 

Demo here.

Answer 2

jQuery ne peut pas animer les couleurs par lui-même; vous devrez utiliser le color plugin. En ce qui concerne l'échange des couleurs, vous aurez besoin d'une variable intermédiaire pour stocker temporairement l'une des couleurs. Certains pseudo-code serait:

 
var bgCol = $(this).backgroundColor() 
$(this).backgroundColor = $(this).textColor(); 
$(this).textColor = bgCol;