2012-06-11 18 views
5

Tôi nghĩ rằng điều này chỉ có thể thực hiện được với jQuery hoặc JavaScript - ai đó có thể cho tôi biết nếu nó có thể mờ dần từ kiểu dáng của biểu định kiểu này sang kiểu khác không? Nếu vậy, làm thế nào một trong những sẽ làm điều đó?Làm mờ từ một bảng định kiểu đến

Cảm ơn bạn!

+0

bản sao có thể có của [trình chuyển đổi biểu định kiểu jquery tự động] (http://stackoverflow.com/questions/1266275/automatic-jquery-stylesheet-switcher) –

+0

Tôi có thể thấy lý do tại sao điều này có ý nghĩa, nhưng suy nghĩ về nó, nó thực sự là ý tưởng khá gọn gàng và linh hoạt. Một số tổng hợp có ý tưởng về cảnh. Một loạt các cài đặt với các giá trị số, sau đó bạn có thể chuyển đổi theo ý muốn giữa các cảnh ở một tỷ lệ do người dùng xác định. Khả năng chuyển đổi các giá trị số giữa các bảng định kiểu sẽ trông tuyệt vời. Nó sẽ phải được kịch bản tùy chỉnh mặc dù tôi nghĩ. –

+0

Trong khi bạn có thể trao đổi các tờ định kiểu, không có khái niệm về hoạt ảnh giữa hai trang. Bạn sẽ phải thiết lập nó theo cách thủ công thông qua JS. –

Trả lời

3

Đây là cách tốt nhất mà tôi có thể nghĩ đến:

$(body).fadeOut(function() { 
    // Switch the stylesheet 
    // And then: 
    $(this).fadeIn(); 
}); 
+0

Cảm ơn. Tôi sẽ sử dụng nó như một giải pháp lâu dài. Nhưng có cách nào để phai mờ trực tiếp giữa hai bảng định kiểu? –

+0

Không, không có gì có thể tính toán mọi quy tắc duy nhất của tất cả các bảng định kiểu. Nếu có, nó sẽ là quá nhiều tính toán để sử dụng. –

+0

Tôi đã nghĩ như vậy. Đoạn mã này cũng tuyệt vời. Nó sẽ thêm một liên lạc tốt đẹp cho ứng dụng của tôi. –

0

Bạn có thể sử dụng jquery animate. Nhưng bạn sẽ phải chỉ định tất cả các quy tắc trong lệnh animate.

2

Hãy thử điều này:

jQuery:

$(document).ready(function() { 
    $("a").click(function() { 
     var rel = $(this).attr("rel"); 
     $('body').hide().fadeIn(1000); 
     $('head').append('<link rel="stylesheet" href="'+rel+'" type="text/css" />'); 
    }); 

}); 

HTML:

<ul> 
    <li><a href="#" rel="layout.css">Change to layout 1</a></li> 
    <li><a href="#" rel="layout2.css">Change to layout 2</a></li> 
    <li><a href="#" rel="layout3.css">Change to layout 3</a></li> 
</ul> 

Trân trọng

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