2011-08-06 103 views
10

Tôi đang cố tạo hiệu ứng thay đổi màu liên kết từ màu hiện tại sang màu khác.Thay đổi màu sắc động của jQuery

$(window).load(function(){ 
    $('.article-preview h1 a').hover(function(){ 
     $(this).animate({ 
      color: #ffffff 
     }, 1500); 
    }); 
}); 

Vì lý do nào đó, nó không hoạt động. Tôi đang sử dụng số jQuery color plugin.

Trả lời

13

Bạn cần phải quấn triplet hex trong một chuỗi, thay đổi này:

color: #ffffff 

này:

color: "#ffffff" 
+0

tôi biết nó sẽ là một cái gì đó ngu ngốc như thế. Damn thời tiết nóng. Cảm ơn! BTW, làm tên màu phải được bọc trong dấu ngoặc kép? – wowpatrick

+2

@wowpatrick, nếu bạn không bọc tên màu trong dấu ngoặc kép, thì thông dịch viên sẽ nghĩ chúng là tên biến. Nó có lẽ không phải là những gì bạn đang tìm kiếm. –

+0

np. Có, bạn cũng phải quấn tên màu. – Baversjo

4

Vấn đề cơ bản là có thể rằng bạn không biết ký hiệu của jQuery/Javascript của ,
viết #ffffff sẽ nhận được bạn Cú phápError, vì SharpSign + Letters không có nghĩa gì trong JS.
Giải pháp nhanh: Bạn phải vượt qua hexa-màu sắc như dây đàn: color: "#ffffff"

jQuery hỗ trợ một vài ký hiệu khác nhau thông qua đối tượng cho .css() & .animate() phương pháp,
cho tôi guid bạn qua chúng.

tên tài sản/Phím

(biên giới, chiều rộng, ...) có thể được viết bằng 3 cách sau: giá trị

backgroundColor //DOM formatting 
'backgroundColor' //DOM formatting BUT - passed as a STRING 
'background-color' //CSS formatting - passed as a STRING 

Bất động sản/Values ​​

(#ffffff , 0px, none, ...) có thể được viết theo 3 cách

0   // 'pure' number - Integer (useful when pre-calculating pixels) 
20.5  //    - Float 
'0'  // number BUT passed as STRING - Integer 
'20.5' //        - Float 
'0px'  // string 
'#ffffff' // - || - 
'auto' // - || - 

Bạn có thể rougly nói rằng tất cả mọi thứ trừ pixel luôn trôi qua như chuỗi
=> đó có nghĩa là trong dấu ngoặc kép (đơn ' hoặc đôi ") hoặc bạn có thể tất nhiên vượt qua một chuỗi biến

Vì vậy, các cách an toàn nhất cho người mới bắt đầu có lẽ sẽ luôn sử dụng ký hiệu báo giá cho cả hai phím - Giá trị & &.

...

Nhìn chung

Tất cả điều này được thực sự sử dụng một phần của JSON - JavaScript Object Notation

Tất cả điều này được mô tả trong jQuery's .css() method documentation

Cẩn thận với

Một số lỗi trong (cũ) Internet Explorers (xem tài liệu của các phương thức .css().animate())

I di d không hiển thị ví dụ về tất cả các khả năng được truyền qua chuỗi, ví dụ:

Vì jQuery 1.6, .css() chấp nhận các giá trị tương đối tương tự như .animate(). Giá trị tương đối là một chuỗi bắt đầu bằng + = hoặc - = đến tăng hoặc giảm giá trị hiện tại. Ví dụ: nếu phần tử của phần tử là 10px, .css ("padding-left", "+ = 15") sẽ dẫn đến tổng số padding-left là 25px.

đối tượng JSON có giá trị hợp lệ hơn con số và chuỗi - boolean, mảng, đối tượng, null ...

Các vấn đề liên quan