2012-06-11 16 views
5

पर फीका मैंने सोचा कि यह jQuery या जावास्क्रिप्ट के साथ संभव हो सकता है - क्या कोई मुझे बता सकता है कि एक स्टाइलशीट की शैलियों से दूसरे में फीका होना संभव है? यदि हां, तो यह कैसे करेगा?एक स्टाइलशीट से दूसरे

धन्यवाद!

+0

[स्वचालित jquery स्टाइलशीट स्विचर] के संभावित डुप्लिकेट (http://stackoverflow.com/questions/1266275/automatic-jquery-stylesheet-switcher) –

+0

मैं देख सकता हूं कि इसे डाउनवोट क्यों मिला, लेकिन इसके बारे में सोचते हुए, यह वास्तव में है सुंदर साफ और लचीला विचार। कुछ सिंथेसाइज़र के दृश्यों का विचार होता है। संख्यात्मक मानों के साथ सेटिंग्स का एक समूह, फिर आप उपयोगकर्ता परिभाषित दर पर दृश्यों के बीच इच्छा पर संक्रमण कर सकते हैं। स्टाइलशीट के बीच संख्यात्मक मानों को स्थानांतरित करने की क्षमता अद्भुत दिखाई देगी। हालांकि मुझे लगता है कि इसे कस्टम स्क्रिप्ट होना होगा। –

+0

जबकि आप स्टाइल शीट स्वैप कर सकते हैं, दोनों के बीच एनिमेट करने की कोई अवधारणा नहीं है। आपको जेएस के माध्यम से इसे मैन्युअल रूप से सेट करना होगा। –

उत्तर

3

यह सबसे अच्छा तरीका है मैं के बारे में सोच सकता है:

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

धन्यवाद। मैं इसे स्थायी समाधान के रूप में उपयोग करूंगा। लेकिन क्या दो स्टाइलशीट के बीच सीधे फीका करने का कोई तरीका है? –

+0

नहीं, कुछ भी स्टाइलशीट के प्रत्येक नियम की गणना नहीं कर सकता है। यदि वहां थे, तो यह उपयोग करने के लिए बहुत अधिक computative होगा। –

+0

मैंने ऐसा सोचा होगा। यह कोड स्निपेट भी महान है। यह मेरे ऐप पर एक अच्छा स्पर्श जोड़ देगा। –

0

आप jquery एनिमेट का उपयोग कर सकते हैं। लेकिन आपको एनिमेट कमांड में सभी नियम निर्दिष्ट करना होगा।

2

आज़माएं:

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> 

बेस्ट सादर

संबंधित मुद्दे