jQuery: простые кнопки Fade из одного класса в другой?

Question

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

Например:

Кнопка имеет класс .btn ....

Ролловер, становится:

.btnhover

Но я бы хотел, чтобы у нового класса было приятное нежное исчезновение, а не просто своп (как это легко сделать просто css)

Спасибо.

Answer 1

jQuery UI имеет метод toggleClass, который можно использовать для анимации от class A до class B.

toggleClass( class, [duration] )

Добавляет указанный класс, если он отсутствует, и удаляетуказанный класс, если он присутствует, с использованием необязательного перехода.

http://jqueryui.com/demos/toggleClass/

Answer 2

В зависимости от того, насколько сложен класс (если у него есть изображения на заднем плане, разные типы шрифтов и т. Д.), Я думаю, что вы можете достичь этого эффекта, дублируя элемент, оставляя один скрытый, а затем используя fadeIn и эффекты исчезновения.

Это может быть примером:

<div id="button">
  <div class="normal"> 
     Your element 
  </div>
  <div class="hover" style="display:none;"> 
     Your element while hovering
  </div>
</div>

<script type="text/javascript">

$("#button").mouseenter(function(){
    $("#button.normal").fadeOut();    
    $("#button.hover").fadeIn();

}).mouseleave(function(){
    $("#button.normal").fadeIn();    
    $("#button.hover").fadeOut();

});

</script>

Answer 3

Я думаю, что плагин Jquery UI позволяет анимацию между классами. Возможно, стоит проверить это:

JQuery UI Animate

Answer 4

Это можно сделать с помощью animate() - вам нужно использовать jquery API, чтобы использовать эту функцию. Довольно просто - просто анимируйте свойства класса, который вы хотите изменить при наведении курсора.

http://api.jquery.com/animate/

Answer 5

То, о чем вы говорите, называется переходом , означающим, что переход из одного состояния в другое состояние происходит плавно и со временем, а не внезапно и внезапно. В качестве альтернативы я предлагаю использовать CSS3 Transitions или функцию jQuery animate. Пожалуйста, дайте мне знать, если эти альтернативы могут удовлетворить ваши требования.

Обновление: Сам jQuery не имеет этой возможности. Но jQueryUI расширяет метод анимации jQuery, так что вы можете плавно применять переход от одного класса CSS к другому классу CSS. Здесь , где вы можете найти его.

Обновление:

var button = $('#button');
button.hover(function(){
   button.switchClass('ordinary', 'hovered', 1000);       
}, function(){
   button.switchClass('hovered', 'ordinary', 1000); 
});