jQuery animar el color del borde en el vuelo estacionario?

Usando un color plugin para animar el color de fondo en el vuelo estacionario.jQuery animar el color del borde en el vuelo estacionario?

$(function() { 
    $('.listing-2 li a').mouseover(function() { 
     $(this).animate({ 
      backgroundColor: "#0e7796" 
     }, 'fast'); 
    }); 
    $('.listing-2 li a').mouseout(function() { 
     $(this).animate({ 
      backgroundColor: "#d6f2c5" 
     }, 'fast'); 
    }); 
});

¿Cómo puedo hacer lo mismo con el color del borde?

Fuente

2009-05-01 Mike

posible duplicado de [jQuery animar backgroundColor] (http://stackoverflow.com/questions/ 190560/jquery-animate-backgroundcolor) – mercator

Asegúrese de cargar jQueryUI [plugin de color] (http://jqueryui.com/animate/) primero – bobobobo

encontradas en Google

$('.listing-2 li a').mouseover(function() { 
    $(this).animate({ borderTopColor: "#0e7796" }, 'fast'); 
}); 
$('.listing-2 li a').mouseout(function() { 
    $(this).animate({ borderTopColor: "#fff" }, 'fast'); 
});

que debe ser un "borderTopColor" (o izquierda, derecha, abajo) en lugar de "borderColor".

Fuente

2009-05-01 22:11:10 Mike

para animar el color de toda la frontera uso:

$(this).animate({ borderTopColor: '#59b4de', borderLeftColor: '#59b4de', borderRightColor: '#59b4de', borderBottomColor: '#59b4de' }, 'fast');

Al parecer, es necesario que especifique todas.

Fuente

2010-07-19 20:46:54

¿Qué ofrece esta configuración más que configurar todo el "color de borde" para animar? (ver la respuesta de @ michael anterior) ¿Esta configuración es más compatible con el navegador? – Lashae

No estoy seguro de si esto sigue siendo el mismo en la versión actual en jQuery, pero cuando respondí la pregunta tenía que especificarlos todos, no se podía animar borderColor como un todo. No sé porque. –

-5

Usted podría intentar esto:

$(this).animate({border: "3px solid #FFF55B"}, 100);

Fuente

2010-09-28 16:57:04 John

esto funciona también.

$("div.item").hover(function() { 
    $(this).stop().animate({"border-color": "#999999"}, "slow"); 
}, 
function() { 
    $(this).stop().animate({"border-color": "#BFBFBF"}, "slow"); 
});

Fuente

2012-02-13 02:55:43 michael

¿Cómo usar tu código si div.item crea después de dom generado? –

Tuve un problema similar. Aparentemente no tenía el archivo jQuery-UI adjunto a mi documento. Una vez que lo adjunté. Todo funciona perfectamente con la respuesta "C. Spencer Beggs".

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

Fuente

2013-02-27 08:09:09

jQuery animar solo acepta valores numéricos. Consulte [documentos]:

Puede usar el complemento jQuery.Color o utilizar la interfaz de usuario de jQuery que amplía la animación y le permite usar valores no numéricos en la animación.

Disfrute

Fuente

2014-05-28 07:41:05 jhmilan

Como alternativa a las soluciones de jQuery, puede animar el color del borde con transiciones CSS también. Dado que está animando el background-color con fast, querrá utilizar una transición 200ms.

su caso

.listing-2 li { 
    border:1px solid #d6f2c5; 
    transition: border 200ms ease-in-out; 
} 

.listing-2 li a:hover { 
    border:1px solid #0e7796; 
}

ejemplo genérico

body { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.container { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid #d6f2c5; 
 
    transition: border 200ms ease-in-out; 
 
} 
 
.container:hover { 
 
    border: 1px solid #0e7796; 
 
}

<div class="container"></div>

Fuente

2016-02-17 22:57:27

jQuery animar el color del borde en el vuelo estacionario?

Respuesta

Cuestiones relacionadas