2012-06-11 18 views
5

Pomyślałem, że to może być możliwe dzięki jQuery lub JavaScript - czy ktoś mógłby mi powiedzieć, czy możliwe jest przejście z jednego stylu styli do innego? Jeśli tak, jak by to zrobić?Przejście z jednego arkusza stylów do drugiego

Dziękujemy!

+0

możliwy duplikat przełącznika [Przełącznik automatycznego przełączania stylów jquery] (http://stackoverflow.com/questions/1266275/automatic-jquery-stylesheet-switcher) –

+0

Widzę, dlaczego tak się stało, ale myślę o tym, to w rzeczywistości całkiem zgrabny i elastyczny pomysł. Niektóre syntezatory mają ideę scen. Zestaw ustawień z wartościami numerycznymi, możesz wtedy zmieniać w czasie pomiędzy scenami z prędkością zdefiniowaną przez użytkownika. Zdolność do przenoszenia wartości liczbowych między arkuszami stylów wyglądałaby niesamowicie. Musiałby to być skrypt niestandardowy, choć myślę. –

+0

Mimo że można wymieniać arkusze stylów, nie ma koncepcji animacji między nimi. Trzeba to ustawić ręcznie za pomocą JS. –

Odpowiedz

3

Jest to najlepszy sposób mogę myśleć:

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

Dzięki. Użyję tego jako stałego rozwiązania. Ale czy istnieje sposób blaknięcia bezpośrednio między dwoma arkuszami stylów? –

+0

Nie, nic nie może obliczyć każdej reguły wszystkich arkuszy stylów. Gdyby tak było, byłoby zbyt dużo do wykorzystania. –

+0

Tak bym pomyślał. Ten fragment kodu też jest świetny. Doda miły akcent do mojej aplikacji. –

0

Można użyć animacji jquery. Ale musisz określić wszystkie reguły w komendzie animacji.

2

Spróbuj tego:

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> 

Pozdrawiam

Powiązane problemy