Các yếu tố làm mờ jQuery từ lớp này sang lớp khác, khi di chuột

Question

, điều này có thể thực hiện được không?

ví dụ:

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

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

Tôi có thể làm mờ tất cả các phần tử có class1 đến lớp 2 khi chuột vượt quá phần tử và quay lại lớp 1 khi chuột không?

Answer 1

Nếu bạn cung cấp cùng một vị trí tuyệt đối, sử dụng fadeIn() và fadeOut() sẽ có hiệu ứng này (được đính kèm với onmouseover và onmouseout).

Answer 2

Tôi nghĩ rằng this plugin là những gì bạn đang tìm kiếm. Nó cho phép bạn tạo hiệu ứng động giữa các lớp. Ví dụ:

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

Answer 3

Hãy xem jQuery UI's extension to addClass. Nó cho phép một tham số thời gian để cho khả năng hoạt hình.

Ở đây, tôi nghĩ rằng bạn muốn làm một cái gì đó như thế này:

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

Rõ ràng bạn sẽ cần phải cài đặt jQuery UI cho việc này.

Answer 4

tôi nghĩ rằng điều này có thể giúp đầy đủ cho bạn ....

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

Answer 5

Nếu bạn không muốn sử dụng một plugin, bạn có thể làm như sau:

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

Đây là triển khai của tôi:

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