jQuery .addClass và .fadeIn?

Question

Vì vậy, tôi có các phần tử h1 là các liên kết và tôi muốn thêm một lớp vào chúng và làm mờ lớp đó một khi phần tử đã được di chuột qua, và sau đó onMouseOut có lớp được loại bỏ, trong khi làm mờ lớp. Nhưng sử dụng chức năng fade không làm gì cho tôi. Thấy khi nó ẩn phần tử. Bất kỳ ý tưởng?

jQuery(".categories h1 a").hover(
function() { 
    jQuery(this).fadeIn("slow").addClass("active"); 
}, 
function(){ 
    jQuery(this).fadeOut("slow").removeClass("active"); 
}); 
}); 

Cảm ơn!

EDIT :::

jQuery("h1").hover(function() { 
     jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800); 
     },function() { 
     jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800); 
     }); 
}); 

Answer 1

Thử sử dụng giao diện người dùng jQuery .addClass và .removeClass.

$(function() { 
    $(".categories h1 a").hover(function() { 
     $(this).stop(true,true).addClass("active", 500); 
    }, function() { 
     $(this).stop(true,true).removeClass("active", 100); 
    });  
}); 

DEMO (Đối với một số lý do, nó không sinh động đúng cách (phai) lần đầu tiên .. nhưng sau đó trở đi nó hoạt động tốt)

Edit: cập nhật cho đầy đủ.

Bạn cũng có thể sử dụng .animate để nhận được hiệu ứng mong muốn.Xem dưới đây,

$(function() { 
    $(".categories h1 a").hover(function() { 
     $(this).stop().animate({ 
      backgroundColor: "#a7bf51" 
     }, 800); 
    }, function() { 
     $(this).stop().animate({ 
      backgroundColor: "#FFFFFF" 
     }, 800); 
    }); 

}); 

DEMO

Answer 2

Âm thanh như bạn muốn phong cách của lớp mờ dần trong Bạn nên nhìn vào animate() cho rằng:.

fadeIn chỉ đơn giản là mất dần trong thành phần.

Answer 3

Tôi không nghĩ rằng bạn có thể vượt qua mờ dần giữa các lớp học, nhưng bạn có thể sử dụng chức năng animate. animate cho phép bạn ảnh hưởng đến bất kỳ biến css nào trong một thời gian nhất định.

Tôi biết rằng loại bỏ một số phong cách từ file css, nhưng một lần nữa, tôi không nghĩ rằng jQuery sẽ vượt qua phai giữa các lớp.

Answer 4

Nếu bạn đã tải thư viện giao diện người dùng jQuery, bạn có thể đặt thêm tham số cho hàm toggleClass.

Đặt độ mờ của bạn qua css.

h1 a { 
    opacity:0.8; 
} 

h1 a.hovered { 
    opacity: 1.0; 
} 

sau đó

jQuery(".categories h1 a").hover(function(e) { 
    $(this).toggleClass('hover', 1000); 
} 

1000 là bộ đếm millisecond về sự kiện này. Vì vậy, hiệu ứng sẽ mờ dần đến 1,0 độ mờ khi di chuột trong giây và mờ dần trong 1 giây khi không di chuột.

Answer 5

Hãy thử điều này, và đây là jsFiddle (enter link description here):

<script type="text/javascript"> 
    jQuery(".categories h1").hover(function() { 
      jQuery(this).stop().animate({ "background-color": "#a7bf51"}, 800); 
      jQuery(this).addClass("active"); 
      jQuery(this).find("a").fadeIn("slow"); 
     }, 
     function() { 
      jQuery(this).stop().animate({ "background-color": "#FFFFFF"}, 800); 
      jQuery(this).addClass("active"); 
      jQuery(this).find("a").fadeOut("slow"); 
    }); 
</script> 
<style type="text/css"> 
    .categories h1 { 
     background-color: rgb(200, 200, 200); 
     display: block; 
     padding: 5px; 
     margin: 5px; 
     width: 100px 
    } 
    .categories h1 a { 
     display: none; 
    } 
</style> 
<div class="categories"> 
    <h1><a href="#">Item 1</a></h1> 
    <h1><a href="#">Item 2</a></h1> 
    <h1><a href="#">Item 3</a></h1> 
</div>​ 

Answer 6

Nếu bạn không muốn giao diện người dùng sử dụng jquery vì nó sẽ là một tải thêm, bạn có thể hãy làm như sau:

(hữu ích đối với tôi khi lớp bootstrap 'ẩn' được sử dụng trong ứng dụng của tôi)

Fade In chậm trong khi loại bỏ các lớp:

$('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000) 

Fade Out chậm, thêm lớp và sau đó mờ dần lại:

$('.myClass').fadeOut(1000, function(){ 
    $(this).addClass('hidden'); //or any other class 
}).fadeIn(10000) 

hy vọng điều này sẽ đơn giản hóa nhiệm vụ của một ai đó!