la fuente de intercambio y el color de fondo usando jQuery
-
10-10-2019 - |
Pregunta
puedo mostrar más de 40 cajas en una página:
<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>
Como se puede ver que establecer un fondo de color y el texto-color. Al pasar por encima Quiero cambiar los colores:
$(".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);
});
});
La animación de la background-color funciona pero no puede cambiar el color de la fuente del elemento. Algunas ideas?
Solución
Como se mencionó @Brandon, necesita jQuery UI (o algo;). Para animar las propiedades no enteros
El problema más grande es el cambio de contexto en su devolución de llamada each
: dentro de los métodos de devolución de llamada hover
, el valor de this
no siempre será lo que quiere. Además, la creación de nuevos objetos jQuery (con $(...)
) es relativamente caro. Proveedores:
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);
});
});
aquí .
Otros consejos
jQuery no puede colores animados por sí mismo; usted tiene que utilizar el color complemento .
Como para el bombeo de los colores alrededor, usted tiene que tener una variable intermedia para almacenar temporalmente uno de los colores. Algunos pseudocódigo sería la siguiente:
var bgCol = $(this).backgroundColor() $(this).backgroundColor = $(this).textColor(); $(this).textColor = bgCol;