jQuery одушевить цвет границы при наведении?

Использование color plugin для анимации цвета фона при наведении указателя.jQuery одушевить цвет границы при наведении?

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

Как я могу сделать то же самое для цвета границы?

источник

2009-05-01 Mike

возможно дубликат [JQuery анимации BackgroundColor] (http://stackoverflow.com/questions/ 190560/jquery-animate-backgroundcolor) – mercator

Убедитесь, что вы загрузили [цветной плагин jQueryUI] (http://jqueryui.com/animate/) – bobobobo

Найдено в Google

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

он должен быть "borderTopColor" (или влево, вправо, внизу) вместо "BorderColor".

источник

2009-05-01 22:11:10 Mike

Чтобы оживить цвет всей использования границы:

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

Видимо, вам нужно указать их все.

источник

2010-07-19 20:46:54

. Что предлагает эта настройка, а не настройка всего «пограничного цвета» для анимации? (см. ответ @ michael выше) Является ли эта настройка более совместимой с браузером? – Lashae

Я не уверен, что это все равно то же самое в текущей версии jQuery, но когда я ответил на вопрос, вы должны были указать все из них, вы не могли бы анимировать borderColor в целом. Я не знаю почему. –

-5

Вы можете попробовать это:

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

источник

2010-09-28 16:57:04 John

это работает также.

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

источник

2012-02-13 02:55:43 michael

Как использовать код, если div.item создает после того, как dom сгенерирован? –

У меня была аналогичная проблема. По-видимому, у меня не было файла jQuery-UI, прикрепленного к моему документу. Однажды я прикрепил его. Все работает отлично с ответом «C. Spencer Beggs».

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

источник

2013-02-27 08:09:09

jQuery анимировать только принимать числовые значения. См. [Docs]:

Вы можете использовать плагин jQuery.Color или использовать jQuery UI, который расширяет анимацию и позволяет использовать нечисловые значения в анимации.

Наслаждайтесь

источник

2014-05-28 07:41:05 jhmilan

В качестве альтернативы решений Jquery, вы можете анимировать цвет границы с CSS переходов, а также. Поскольку вы анимации background-color с fast, вы хотите использовать переход 200ms.

Ваш случай

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

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

Generic Пример

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>

источник

2016-02-17 22:57:27

jQuery одушевить цвет границы при наведении?

ответ

Смежные вопросы