动画片段：rect属性？

Question

我想动画的CSS属性clip: rect与jQuery的.animate()，但无法找到，如果这是可能的任何地方。曾尝试：

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