jQuery Randfarbe beim Schweben animieren?

Verwenden Sie eine color plugin, um Hintergrundfarbe bei Hover zu animieren.jQuery Randfarbe beim Schweben animieren?

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

Wie kann ich das gleiche für Randfarbe tun?

Quelle

2009-05-01 Mike

möglich Duplikat [jQuery animieren Backgroundcolor] (http://stackoverflow.com/questions/ 190560/jquery-animate-backgroundcolor) – mercator

Stellen Sie sicher, dass Sie jQueryUIs [color plugin] (http://jqueryui.com/animate/) zuerst laden – bobobobo

in google gefunden

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

es muss ein "borderTopColor" (oder nach links, rechts, unten) anstelle von "border".

Quelle

2009-05-01 22:11:10 Mike

Um die Farbe der gesamten Grenze Nutzung animieren:

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

Anscheinend müssen Sie sie alle angeben.

Quelle

2010-07-19 20:46:54

Was bietet dieses Setup mehr, als die gesamte zu animierende "border-color" einzurichten? (Siehe @ Michael's Antwort oben) Ist dieses Setup browserkonformer? – Lashae

Ich bin mir nicht sicher, ob dies in der aktuellen Version von jQuery immer noch der Fall ist, aber als ich die Frage beantwortete, die Sie alle angeben mussten, konnten Sie borderColor nicht als Ganzes animieren. Ich weiß nicht warum. –

-5

Sie konnten dieses versuchen:

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

Quelle

2010-09-28 16:57:04 John

funktioniert das auch.

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

Quelle

2012-02-13 02:55:43 michael

Wie verwende ich deinen Code, wenn div.item nach dom generiert erstellt? –

Ich hatte ein ähnliches Problem. Ich hatte anscheinend nicht die jQuery-UI-Datei an mein Dokument angehängt. Sobald ich es anbrachte. Alles funktioniert perfekt mit "C. Spencer Beggs" Antwort.

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

Quelle

2013-02-27 08:09:09

jQuery animieren akzeptiert nur numerische Werte. Siehe [Dokumentation]:

Sie können das jQuery.Color-Plugin verwenden oder die jQuery UI verwenden, die animate erweitert und Ihnen die Verwendung nicht numerischer Werte in animate ermöglicht.

Genießen

Quelle

2014-05-28 07:41:05 jhmilan

Als Alternative zu den jQuery-Lösungen können Sie auch die Rahmenfarbe mit CSS-Übergänge animieren. Da Sie die background-color mit fast animieren, möchten Sie einen 200ms Übergang verwenden.

Ihr Fall

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

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

Generisches Beispiel

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>

Quelle

2016-02-17 22:57:27

jQuery Randfarbe beim Schweben animieren?

Antwort

Verwandte Themen