Anima el clip: ¿propiedad correcta?

Question

Quiero animar la propiedad css clip: rect con jQuery's .animate() pero no puedo encontrar si esto es posible en cualquier lugar. Han intentado:

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

sin ninguna suerte. ¿Alguien sabe?

Gracias

Answer 1

Cualquier cosa es posible, pero probablemente hay maneras más fáciles de hacer lo que quiera sin necesidad de utilizar clip, pero si se utiliza la función de jQuery animado fx.step, puede animar cualquier cosa, pero hay que hacer algunos cálculos para averiguar los valores y esas cosas, pero es algo como esto:

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

Para controlar la duración, agregue duración: 3000, antes del atributo de paso. Por lo tanto, el código podría indicar:

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


}); 

Tienes que jugar con exactamente cómo desea que la animación se ejecute, pero esto debería ayudar.

Answer 3

Dado que esta es una pregunta popular y fue la parte superior de los resultados de búsqueda de Google cuando busqué esto hoy, aquí hay un plugin jQuery que funciona con la propiedad clip: y .animate() de forma nativa.

Crédito: 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);