jQuery anima il colore del bordo su hover?

Utilizzo di color plugin per animare il colore di sfondo al passaggio del mouse.jQuery anima il colore del bordo su hover?

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

Come posso fare lo stesso per il colore del bordo?

fonte

2009-05-01 Mike

possibile duplicato del [jQuery animare backgroundColor] (http://stackoverflow.com/questions/ 190560/jquery-animate-backgroundcolor) – mercator

Assicurati di caricare il [color plug-in] di jQueryUI (http://jqueryui.com/animate/) prima – bobobobo

Trovato in google

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

deve essere un "borderTopColor" (o sinistra, a destra, in basso) al posto di "borderColor".

fonte

2009-05-01 22:11:10 Mike

per animare il colore dell'intera uso transfrontaliero:

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

A quanto pare, è necessario specificare tutti.

fonte

2010-07-19 20:46:54

Cosa offre questa impostazione oltre all'impostazione dell'intero "border-color" da animare? (vedi la risposta di @ michael sopra) Questa impostazione è più compatibile con il browser? – Lashae

Non sono sicuro se questo è ancora lo stesso nella versione corrente su jQuery, ma quando ho risposto alla domanda è stato necessario specificarli tutti, non è possibile animare borderColor nel suo complesso. Non so perché. –

-5

Si potrebbe provare questo:

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

fonte

2010-09-28 16:57:04 John

questo funziona anche.

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

fonte

2012-02-13 02:55:43 michael

Come utilizzare il tuo codice se div.item crea dopo dom generato? –

Ho avuto un problema simile. Apparentemente non avevo il file jQuery-UI allegato al mio documento. Una volta l'ho attaccato. Tutto funziona perfettamente con la risposta di "C. Spencer Beggs".

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

fonte

2013-02-27 08:09:09

jQuery animate accetta solo valori numerici. Vedi [docs]:

È possibile utilizzare il plugin jQuery.Color o utilizzare l'interfaccia utente di jQuery che estende animate e consente di utilizzare valori non numerici in animato.

Godetevi

fonte

2014-05-28 07:41:05 jhmilan

In alternativa alle soluzioni jQuery, è possibile animare il colore del bordo con le transizioni CSS pure. Poiché stai animando lo con fast, ti consigliamo di utilizzare una transizione 200ms.

vostro caso

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

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

esempio generico

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>

fonte

2016-02-17 22:57:27

jQuery anima il colore del bordo su hover?

risposta

Problemi correlati