Klibi canlandırın: özellik mi?

Question

css özelliğinin clip: rect jQuery's .animate() ile canlandırılmasını istiyorum ancak bunun herhangi bir yerde mümkün olup olmadığını bulamıyorum. denediniz:

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

olmadan herhangi bir şans. Kimse biliyor mu?

Teşekkür

Answer 1

Her şey mümkün, ama muhtemelen orada clip kullanmadan istediğini yapmak daha kolay yolları vardır, ancak jQuery canlandırın en fx.step işlevini kullanırsanız, bir şey animasyon, ancak bazı hesaplamalar yapmanız gereken değerleri ve malzeme anlamaya, ancak böyle bir şey gider:

$(".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 Raptor

Süreyi denetlemek için, adım özniteliğinden önce süre: 3000, ekleyin. Yani, kod devlet istiyorsunuz:

$('#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); 


}); 

Sen animasyon çalıştırmak istediğiniz tam olarak nasıl uğraşmak zorunda, ama bu yardımcı olmalıdır.

Answer 3

Bu, popüler bir sorudur ve bugün aradığımda Google arama sonuçlarının zirvesindeydi, işte clip: özelliği ve .animate() yerel olarak çalışan bir jQuery eklentisi.

Kredi: 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);