क्लिप को एनिमेट करें: rect property?

Question

मैं jQuery की .animate() के साथ सीएसएस संपत्ति clip: rect को एनिमेट करना चाहता हूं लेकिन यह कहीं भी संभव नहीं है, लेकिन यह नहीं मिल सकता है। की कोशिश की है:

$(".img1").animate({ clip: "rect(1px, 945px, 499px, 1px)"
},300);

किसी भी भाग्य के बिना। क्या कोई जानता है?

धन्यवाद

Answer 1

कुछ भी संभव है, लेकिन वहाँ शायद clip का उपयोग किए बिना आप क्या चाहते हैं करना आसान तरीके हैं, लेकिन अगर आप jQuery चेतन के fx.step फ़ंक्शन का उपयोग करें, आप कुछ भी चेतन कर सकते हैं, लेकिन आप के लिए कुछ गणना करने की जरूरत है मूल्यों और सामान बाहर निकालने के लिए, लेकिन यह कुछ इस तरह चला जाता है:

$(".img1").animate({ 
    fontSize: 100 //some unimportant CSS to animate so we get some values 
}, 
{ 
    step: function(now, fx) { //now is the animated value from initial css value 
     $(this).css('clip', 'rect(0px, '+now+'px, '+now+'px, 0px)') 
    } 
}, 10000); 

FIDDLE

Answer 2

@Shivan रैप्टर

अवधि को नियंत्रित करने के लिए, अवधि जोड़ें: 3000, चरण विशेषता से पहले। तो, कोड बताएगा:

$('#A').on('click', function() { 

    $(".img1").animate({ 
     fontSize: 1 
    }, 
    { 
     duration:3000, 
     step: function(now, fx) { 
      $(this).css('clip', 'rect(0px, '+(now+30)+'px, '+(now+30)+'px, 0px)') 
     } 
    }, 1000); 


}); 

आपको एनीमेशन चलाने के लिए बिल्कुल ठीक से खेलना है, लेकिन इससे मदद मिलनी चाहिए।

Answer 3

चूंकि यह एक लोकप्रिय सवाल है और जब मैंने आज इसकी खोज की तो Google खोज परिणामों का शीर्ष था, यहां एक jQuery प्लगइन है जो clip: संपत्ति और .animate() मूल रूप से काम करता है।

क्रेडिट: http://zduck.com/2013/jquery-css-clip-animation-plugin/

/* 
* jquery.animate.clip.js 
* 
* jQuery css clip animation support -- Joshua Poehls 
* version 0.1.4 

* forked from Jim Palmer's plugin http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/ 
* idea spawned from jquery.color.js by John Resig 
* Released under the MIT license. 
*/ 
(function (jQuery) { 

    function getStyle(elem, name) { 
     return (elem.currentStyle && elem.currentStyle[name]) || elem.style[name]; 
    } 

    function getClip(elem) { 
     var cssClip = $(elem).css('clip') || ''; 

     if (!cssClip) { 
      // Try to get the clip rect another way for IE8. 
      // This is a workaround for jQuery's css('clip') returning undefined 
      // when the clip is defined in an external stylesheet in IE8. -JPOEHLS 
      var pieces = { 
       top: getStyle(elem, 'clipTop'), 
       right: getStyle(elem, 'clipRight'), 
       bottom: getStyle(elem, 'clipBottom'), 
       left: getStyle(elem, 'clipLeft') 
      }; 

      if (pieces.top && pieces.right && pieces.bottom && pieces.left) { 
       cssClip = 'rect(' + pieces.top + ' ' + pieces.right + ' ' + pieces.bottom + ' ' + pieces.left + ')'; 
      } 
     } 

     // Strip commas and return. 
     return cssClip.replace(/,/g, ' '); 
    } 

    jQuery.fx.step.clip = function (fx) { 
     if (fx.pos === 0) { 
      var cRE = /rect\(([0-9\.]{1,})(px|em)[,]?\s+([0-9\.]{1,})(px|em)[,]?\s+([0-9\.]{1,})(px|em)[,]?\s+([0-9\.]{1,})(px|em)\)/; 

      fx.start = cRE.exec(getClip(fx.elem)); 
      if (typeof fx.end === 'string') { 
       fx.end = cRE.exec(fx.end.replace(/,/g, ' ')); 
      } 
     } 
     if (fx.start && fx.end) { 
      var sarr = new Array(), earr = new Array(), spos = fx.start.length, epos = fx.end.length, 
       emOffset = fx.start[ss + 1] == 'em' ? (parseInt($(fx.elem).css('fontSize')) * 1.333 * parseInt(fx.start[ss])) : 1; 
      for (var ss = 1; ss < spos; ss += 2) { sarr.push(parseInt(emOffset * fx.start[ss])); } 
      for (var es = 1; es < epos; es += 2) { earr.push(parseInt(emOffset * fx.end[es])); } 
      fx.elem.style.clip = 'rect(' + 
       parseInt((fx.pos * (earr[0] - sarr[0])) + sarr[0]) + 'px ' + 
       parseInt((fx.pos * (earr[1] - sarr[1])) + sarr[1]) + 'px ' + 
       parseInt((fx.pos * (earr[2] - sarr[2])) + sarr[2]) + 'px ' + 
       parseInt((fx.pos * (earr[3] - sarr[3])) + sarr[3]) + 'px)'; 
     } 
    } 
})(jQuery);