2009-07-02 30 views
9

Như tiêu đề ngụ ý, tôi đang sử dụng các chức năng hiển thị và ẩn của jQuery để ẩn và hiển thị các phần tử. Tuy nhiên, tôi không muốn mở rộng chiều cao của phần tử, chỉ là chiều rộng.Sửa đổi chức năng hiển thị/ẩn thành chỉ chiều rộng, không phải chiều cao?

Tôi đã suy nghĩ về việc sử dụng hàm animate nhưng tôi không chắc đây có phải là cách tốt nhất để thực hiện hay không.

Ngoài ra, tôi không muốn đặt chiều cao trong javascript vì nó có thể thay đổi trong đánh dấu. Lý tưởng nhất, những gì tôi muốn xảy ra là khi chức năng được gọi là để ẩn một phần tử chiều rộng của đối tượng đi từ chiều rộng ban đầu của nó đến 0 và alpha giảm xuống 0 thì ngược lại sẽ xảy ra khi tôi yêu cầu nó hiển thị.

Trả lời

17

Bạn muốn được sử dụng chức năng Animate:

$("div.myElement").animate({width: "toggle"}); 

Buổi biểu diễn sinh động và ẩn các phương pháp chủ yếu là phương pháp phù phiếm mà hiển thị một hình ảnh động đẹp. Nói chung, bạn sẽ muốn tùy chỉnh hiệu ứng. Bạn cũng có thể thử:

$("div.myElement").animate({width: "toggle", opacity: "toggle"}); 

để có hiệu ứng khá rộng và mờ dần. Và nếu bạn thấy mình sử dụng các hoạt ảnh này lặp đi lặp lại, bạn có thể quấn chúng theo một phương thức jQuery mới:

$.fn.myShow = function(duration) { 
    return this.animate({width: "toggle", opacity: "toggle"}, duration || 1000); 
}); 

$("div.myElement").myShow("slow"); 
+0

Tôi đã thay đổi "chiều rộng" thành "chiều cao" để giải quyết vấn đề nơi HTML xuất hiện rung nó bật lên. Điều này làm việc hoàn hảo! – Chris

+2

Nếu bạn chỉ quan tâm đến chiều cao (ví dụ: không phải chiều rộng như OP muốn), bạn có thể sử dụng [slideUp] (http://api.jquery.com/slideUp/) và [slideDown] (http: //api.jquery .com/slideDown /). –

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