CSS3iz संक्रमण का अस्तित्व नहीं है अगर CSS3 संक्रमण

क्या नहीं है तो CSS3iz समर्थित नहीं है तो संक्रमण के समान कुछ सक्षम करने के लिए Modernizr और jQuery के संयोजन का उपयोग करने का कोई तरीका है? क्या मैं वर्तमान में कर रहा हूँ इस तरह है ...CSS3iz संक्रमण का अस्तित्व नहीं है अगर CSS3 संक्रमण

<div class="hoverable"> 
<p>This div changes both width and height on hover</p> 
</div>

सीएसएस

.hoverable { 
height: 100px; 
width: 2000px; 
transition: height .5s, width .5s; 
} 

.hoverable:hover { 
height: 200px; 
width: 100px; 
}

मैं वर्तमान में सिर्फ div डिफ़ॉल्ट रूप से मंडराना स्थिति में होना करने के लिए Modernizr का उपयोग कर रहा है अगर CSS3 के संक्रमण समर्थित नहीं हैं यदि CSS3 समर्थित नहीं है तो jQuery एनीमेशन ट्रिगर करने के लिए Modernizr का उपयोग करने का कोई तरीका है? यदि jQuery नहीं है, तो मैं कस्टम एनीमेशन का भी उपयोग कर ठीक हूं, लेकिन मुझे वास्तव में नहीं पता कि कैसे करना है।

स्रोत

2011-05-23 JacobTheDev

आप $ .animate() के साथ प्रभाव को पुन: उत्पन्न कर सकते हैं, हालांकि कुछ प्रभाव वास्तव में धीमे (अंतराल) हो सकते हैं .. या आप पुराने ब्राउज़र में कुछ प्रभाव अक्षम कर सकते हैं, क्योंकि आम तौर पर दृश्य प्रभाव महत्वपूर्ण नहीं हैं – Andre

यही है मैं वर्तमान में कर रहा हूँ। (प्रभाव का मतलब मेरा मतलब है) – JacobTheDev

अपने आप को इस हल। जिस तरह से मैंने किया था

<!doctype html> 
<html> 
    <head> 
     <title>Modernizr + jQuery Testing</title> 
     <script type="text/javascript" src="modernizr.js"></script> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript"> 
     if(!Modernizr.csstransitions) { // Test if CSS transitions are supported 
      $(function() { 
       $('#js').hover(function(){ 
        $(this).animate({width:'50px',height:'50px'},{queue:false,duration:500}); 
       }, function(){ 
        $(this).animate({width:'100px',height:'100px'},{queue:false,duration:500}); 
       }); 
      }); 
     } 
     </script> 
     <style type="text/css"> 
      body { 
       margin: 0; 
       padding: 0; 
      } 
      div { 
       border: 1px solid red; 
       height: 100px; 
       margin: 25px auto; 
       width: 100px; 
      } 
      #css { 
       transition: height .5s, width .5s; 
       -khtml-transition: height .5s, width .5s; 
       -moz-transition: height .5s, width .5s; 
       -o-transition: height .5s, width .5s; 
       -webkit-transition: height .5s, width .5s; 
      } 
      #css:hover { 
       height: 50px; 
       width: 50px; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="js"> 
      JS 
     </div> 
     <div id="css"> 
      CSS 
     </div> 
    </body> 
</html>

यह पूरी तरह से काम करता था। सीएसएस एक केवल नए ब्राउज़रों में एनिमेट करता है (क्योंकि यह एकमात्र जगह है) और जेएस केवल पुराने ब्राउज़र में एनिमेट करता है। यदि आप इस स्क्रिप्ट का उपयोग करते हैं, तो आप http://www.modernizr.com/ से आधुनिकज़र प्राप्त कर सकते हैं और http://www.jquery.com/ (निश्चित रूप से) से jQuery प्राप्त कर सकते हैं।

स्रोत

2011-05-24 17:03:20 JacobTheDev

आप उपयोग कर सकते हैं:

 
if(!Modernizr.csstransitions) { // Test if CSS transitions are supported 
    $('#myDiv').bind({ 
     mouseenter: function() { 
      $(this).animate({ 
       width: 1000, 
       height: 1000 
      }, 1000); 
     }, 
     mouseleave: function() { 
      $(this).animate({ 
       width: 100, 
       height: 100 
      }, 1000); 
     } 
    }); 
}

स्रोत

2011-05-23 15:03:35 amustill

यह प्रभावी दिखता है। मैं इसे एक घंटे या तो कोशिश करूँगा। – JacobTheDev

ने कोशिश की लेकिन इसे काम पर नहीं मिला। क्या मुझे इसे '' के अलावा कहीं और रखना चाहिए? – JacobTheDev

इसे काम करने के लिए मिला, लेकिन थोड़ा अलग। – JacobTheDev

CSS3iz संक्रमण का अस्तित्व नहीं है अगर CSS3 संक्रमण

उत्तर

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