jquery animate を長時間使用すると、小さな変更のアニメーションが信じられないほどぎくしゃくすることに気付きました。これを修正する唯一の方法は、時間を大幅に短縮し、さらにスケーリングすることです。しかし、一部のプロジェクトでは、これは不可能です...
CSSトランジションについて調べてみました。そして、それはより良い結果を提供しませんでした。アニメーション自体は優れていましたが、Firefox はひどくぎくしゃくしていて、Chrome ではアニメーションの仕上げが滑らかではありませんでした。
私の質問はこれです.画像のスムーズなスケーリングを提供できるアニメーションエンジンを備えた他のライブラリはありますか? または、私が見逃しているテクニックはありますか?
これは私のアニメーションです:
$('.item a').mouseover(function(){
//
var this_img = $(this).find('.img_grayscale');
var css_w = parseInt(this_img.attr("width"), 10);
var css_h = parseInt(this_img.attr("height"), 10);
// 10% of height and width calc here
var css_p_w = css_w * 10 / 100;
var css_p_h = css_h * 10 / 100;
//
var css_top = -(css_p_h / 2);
var css_left = -(css_p_w / 2);
//
this_img.stop().animate({ opacity:1 }, 100, function(){
this_img.animate({width:css_w + css_p_w, height:css_h + css_p_h, top:css_top, left:css_left}, 1200, "linear");
});
//this_img.transitionStop().transition({ opacity:1 }, 100, function(){
// this_img.transition({ scale:1.05, rotate:0.02 }, 2500, "ease");
//});
//
}).mouseout(function(){
//
var this_img = $(this).find('.img_grayscale');
var css_w = parseInt(this_img.attr("width"), 10);
var css_h = parseInt(this_img.attr("height"), 10);
//
this_img.stop().animate({ width:css_w, height:css_h, top:"0", left:"0" }, 1200, "linear", function(){
this_img.animate({ opacity:0 }, 100);
});
//this_img.transitionStop().transition({ scale:1 }, 2500, "ease", function(){
// this_img.transition({ opacity:0, rotate:0.02 }, 100)
//});
//
});
コメント アウトされた部分は jquery.transit プラグイン テストです。このプラグインは css3 トランジションを提供します。
実際の例: http://mac.idev.ge:800/test/ (ホバー画像)