jquery फ्लिप प्रभाव कैसे करें?

Question

मैं आम तौर पर उन मोबाइल उपकरणों पर मिलने वाले प्रभाव की नकल करने की कोशिश कर रहा हूं जहां आपके पास एक पैनल है और जब आप एक बटन पर क्लिक करते हैं तो यह चारों तरफ फैलता है और दूसरी तरफ इसकी दूसरी जानकारी होती है।

मैं कुछ कोड है कि सीएसएस संक्रमण और here is an example

js usses पाया

$('#signup').on('click', function(e) { 
    e.preventDefault(); 
    document.getElementById('side-2').className = 'flip flip-side-1'; 
    document.getElementById('side-1').className = 'flip flip-side-2'; 

}); 

$('#create').on('click', function(e) { 
    e.preventDefault(); 
    document.getElementById('side-2').className = 'flip'; 
    document.getElementById('side-1').className = 'flip'; 

}); 

इस उदाहरण के साथ मुद्दा यह है कि अगर मैं jQuery में जावास्क्रिप्ट कन्वर्ट यह काम कर रहा stopps है:

से:

document.getElementById('side-2').className = 'flip flip-side-1'; 

से

$('#side-2').addClass('flip flip-side-1'); 

यह भी सुनिश्चित नहीं है कि पहले से ही एक jquery प्लगइन नहीं है जो इसे बेहतर तरीके से करता है।

कोई विचार?

कुछ और कोड। एचटीएमएल

<div id="side-1" class="flip"> 
    <a id="signup" href="#">sign up</a> 
</div> 
<div id="side-2" class="flip"> 
    <a id="create" href="#">create</a> 
</div> 

सीएसएस

.flip { 
    backface-visibility:    hidden; 
     -moz-backface-visibility: hidden; 
     -ms-backface-visibility:  hidden; 
     -o-backface-visibility:  hidden; 
     -webkit-backface-visibility: hidden; 
    border: 1px solid black; 
    transform-origin:    50% 50% 0px; 
     -moz-transform-origin: 50% 50% 0px; 
     -ms-transform-origin:  50% 50% 0px; 
     -o-transform-origin:  50% 50% 0px; 
     -webkit-transform-origin: 50% 50% 0px; 
    transition: all 1s; 
     -moz-transition: all 1s; 
     -ms-transition:  all 1s; 
     -o-transition:  all 1s; 
     -webkit-transition: all 1s; 
} 

#side-1 { 
    transform:    rotateY(0deg); 
     -moz-transform: rotateY(0deg); 
     -ms-transform:  rotateY(0deg); 
     -o-transform:  rotateY(0deg); 
     -webkit-transform: rotateY(0deg); 
} 

#side-2 { 
    transform:    rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
     -ms-transform:  rotateY(180deg); 
     -o-transform:  rotateY(180deg); 
     -webkit-transform: rotateY(180deg); 
} 

.flip-side-1 {  
    transform:    rotateY(0deg) !important; 
     -moz-transform: rotateY(0deg) !important; 
     -ms-transform:  rotateY(0deg) !important; 
     -o-transform:  rotateY(0deg) !important; 
     -webkit-transform: rotateY(0deg) !important; 
} 

.flip-side-2 { 
    transform:    rotateY(180deg) !important; 
     -moz-transform: rotateY(180deg) !important; 
     -ms-transform:  rotateY(180deg) !important; 
     -o-transform:  rotateY(180deg) !important; 
     -webkit-transform: rotateY(180deg) !important; 
} 

Answer 1

http://lab.smashup.it/flip/ सबसे अच्छा मैं इस के लिए मिल गया है है।

Answer 2

वर्तमान कोड के बारे में। कारण यह काम नहीं कर रहा है कि आप इसे आसानी से क्यों चाहते हैं क्योंकि कक्षाओं के बीच स्विच करते समय यह किसी भी एनीमेशन का उपयोग नहीं कर रहा है। आप इसके लिए jQuery यूआई का उपयोग कर सकते हैं।

यहाँ दिखाया गया है: http://jqueryui.com/docs/switchClass/

Answer 3

सीएसएस का उपयोग कर बदल देती है की उल्टा यह तेजी से (एक बार आप पांच बार में सभी शैलियों डाल करने के लिए की जरूरत नहीं है) चलेंगे और यह बहुत ही सुंदर हो जाएगा। नकारात्मकता यह है कि यह कुछ ब्राउज़रों पर बिल्कुल काम नहीं करेगा (यानी पुराने सीएसएस ब्राउज़र समर्थन के साथ पुराने ब्राउज़र)।

व्यक्तिगत रूप से, मैं सीएसएस ट्रांसफॉर्म का उपयोग करता हूं। आपका कोड उम्र और मोबाइल के साथ बेहतर नहीं लगेगा।

मैं एक जंगली अनुमान ले लेंगे कि कारण अपने jQuery "अनुवाद" विफल रहता है कि मौजूदा वर्गों अनुवाद कोड से हटाया नहीं जा रहा है, लेकिन वे, शुद्ध जावास्क्रिप्ट द्वारा कर रहे हैं तो:

$ ('# साइड-2')। removeClass()। addClass ('...');

यदि आप jQuery विकल्प देखते हैं - वे div की सामग्री को छुपाते हैं, फिर रंगीन आयताकार घुमाएं, फिर div को फिर से भरें। सीएसएस विधि, जब यह काम करती है, वास्तव में काम करता है।