jQuery выводит элементы из одного класса в другой при наведении

Question

можно ли это сделать?

, например.

.class1{
  background-image:(whatever.jpg)
  color: #fff;
}

.class2{
  background-image:(whatever2.jpg)
  color: #999;
}

Могу ли я потушить все элементы, от класса 1 до класса 2, когда мышь находится над элементом, и вернуться к классу 1, когда мышьвне дома?

Answer 1

Если вы не хотите использовать плагин, вы можете сделать следующее:

$(".class1").hover(
function () {
    $(this).fadeOut(function () {
        $(this).removeClass("class1").addClass("class2").fadeIn('fast');
    });
},
function () {
    $(this).fadeOut(function () {
        $(this).removeClass("class2").addClass("class1").fadeIn('fast');
    });
});

Answer 2

Взгляните на расширение jQuery UI до addClass.Это позволяет параметру продолжительности давать возможность анимации.

Здесь, я думаю, вы хотите сделать что-то вроде этого:

$('.class1').hover(function(){
    $(this).addClass('class2', 800);
}, function(){
    $(this).removeClass('class2', 800);
});

Очевидно, вам нужно установить для этого пользовательский интерфейс jQuery.

Answer 3

Я думаю этот плагин - это то, что вы ищете.Это позволяет вам анимировать между классами.Например:

$('.class1').animateToClass('.class2', 1000);

Answer 4

Если вы зададите одинаковую абсолютную позицию, использование fadeIn () и fadeOut () приведет к этому эффекту (прикреплен к onmouseover и onmouseout).

Answer 5

Это моя реализация:

      $(this).fadeOut("fast"); or $(this).hide();
      $(this).removeClass('css1').addClass('css2');
 $(this).fadeIn("slow");

Answer 6

Предоставляя Jquery hover () с функциями handlerIn и handlerOut, как описано здесь 1002 *, вы можете легко обрабатывать события входа и выхода мыши.Далее взгляните на JQuery UI switchClass () , чтобы легко переключаться между двумя классами чистым способом.Наконец, добавление fadeIn () делает все это чистым переходом.

$("div.class1").hover(
 function(){$("div").switchClass("class1", "class2").fadeIn(800);},
 function(){$("div").switchClass("class2", "class1").fadeIn(800);}
);

Рабочий CodePen

Answer 7

я думаю, что это может помочь вам ...

$('.class1').mouseover(function() {
    $(this).toggleClass('class2');
 });