jquery

2011-09-08 7 views
5

के साथ css3 रूपांतरण पुन: उत्पन्न करें हाय क्या कोई मुझे कुछ देरी/एनीमेशन गति का उपयोग कर jquery के साथ इस css3 प्रभाव को पुन: उत्पन्न करने के लिए दिखा सकता है?jquery

.element:hover{ 
-moz-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
-webkit-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
-o-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
-ms-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
z-index:9999; 

} 

JSFIDDLE

+4

यह सिर्फ स्केलिंग तत्व की चौड़ाई और ऊंचाई नहीं है? –

+0

http://jsfiddle.net/2xWXY/ – sbaaaang

उत्तर

1

यहां आप जो पूछ रहे हैं उसके करीब कुछ है। मुझे यकीन है कि आप अपनी पसंद के हिसाब से यह tweak सकता हूँ

$('.element').hover(function(){ 

    $(this).css('position','relative').animate({ 
     height: $(this).height()*1.3, 
     width: $(this).width()*1.3, 
     left: '-=' + $(this).width() /4, 
     top: '-=' + $(this).height() /4, 
     'fontSize': $('.element').css('fontSize').substring(0,$('.element').css('fontSize').length -2) * 1.3 + 'px' 
    },'fast'); 
}, 
function() {     
     $(this).css('position','relative').animate({ 
     height: $(this).height()/1.3, 
     width: $(this).width()/1.3, 
     left: 0, 
     top: 0, 
     'fontSize': $('.element').css('fontSize').substring(0,$('.element').css('fontSize').length -2)/1.3 + 'px' 
    },'fast'); 
}    

); 

http://jsfiddle.net/dTkhM/2/

+0

उहम्म ... कई बार बार-बार माउस ओवर और माउस आउट पास करने का प्रयास करें: पी – sbaaaang

+2

मैंने कहा कि यह सही नहीं है? समस्या तब होती है जब आप div की चौड़ाई और ऊंचाई बदलते हैं, यह ऊपरी बाएं कोने से स्केल करता है, और मध्य में css3 ट्रांसफॉर्म के साथ नहीं। इसे ठीक करने के लिए मुझे शीर्ष और बाएं गुणों को बदलने के साथ गड़बड़ करनी पड़ी, लेकिन मुझे नहीं पता कि उनके लिए सही मूल्य क्या होना चाहिए। दूसरा मुद्दा यह है कि मुझे यकीन नहीं है कि सीएसएस दशमलव मानों के साथ क्या करता है, जैसे फ़ॉन्ट आकार: 13.313452 पीएक्स उदाहरण के लिए। –

+0

हाँ यह मेरे स्वर को अपराध नहीं कर रहा था;) यह कहना था कि आपका कोड बिल्कुल सही है लेकिन मैं उस छोटी सी बग के कारण उत्तर स्वीकार नहीं कर सकता;) – sbaaaang

2

यहाँ कैसे मैं एक साधारण रोटेशन लागू करने के बारे जा सकता (खाते में फ्रेम दर नहीं ले रही) है:

$(function(){ 
    (function(n){ 
     this.interval = n; 
     this.transform = { 
      'rotation': 0 
     }; 

     this.start = function(){ 
      setInterval(this.update, this.interval); 
     }; 

     this.update = function(){ 
      this.transform['rotation'] = (this.transform.rotation + 10) % 360; 
      $('div').css('transform', 'rotate(' + this.transform.rotation + 'deg)'); 
     }; 
     return this; 
    })(30).start(); 
}); 

http://jsfiddle.net/dbrecht/82aUL/1/

यह एक साधारण एनीमेशन को दर्शाता है। आपको यह पता लगाने में सक्षम होना चाहिए कि बाकी इसे कैसे एक साथ रखा जाए।

+0

ehm ..: पी ... पता नहीं है लेकिन मेरे लिए कोड jsfiddle पर काम नहीं करता है :( – sbaaaang

+1

यह क्रोम केवल एटीएम –

+0

हाँ है: पी ब्रायन उत्तर निश्चित है ;) – sbaaaang