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

Question

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

например.

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

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

я могу исчезать все элементы, которые имеют Class1 к class2, когда мышь находится над элементом, и обратно class1, когда мышь находится вне дома?

Answer 1

Если вы даете как же абсолютное положение, используя FadeIn() и FADEOUT() будет иметь этот эффект (прилагается к OnMouseOver и onmouseout).

Answer 2

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

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

Answer 3

Посмотрите на jQuery UI's extension to addClass. Он позволяет параметру длительности дать возможность анимации.

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

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

Очевидно, что вам нужно установить JQuery UI для этого.

Answer 4

я думаю, что это может быть помочь вам полный ....

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

Answer 5

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

$(".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 6

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

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