2012-03-21 23 views
0

マウスのパンの効果をfisheyeのプラグインと組み合わせようとしています(http://interface.eyecon.ro/docs/fisheye)。jQueryの魚眼のエフェクト+マウスの動きのパン

別途

これらの作業罰金が、しかし、一緒に彼らは完全に痙性行く

はすべてを滑らかにするために以下のコードに変更または追加することができることはありますか?

マウスパン:

$("body").mousemove(function(e) { 
    var distance = e.pageX - $(this).offset().left; 
    var percentage = distance/$(this).width(); 
    var targetX = -Math.round(($(".dock-container").width() - $(this).width()) * percentage); 
    $('.dock-container').animate({left: [targetX+"px", "easeOutSine"]}, { queue:false, duration:2500 }); 
}); 

フィッシュアイ:

$('#dock').Fisheye({ 
    maxWidth: 42, 
    items: 'a', 
    itemsText: '', 
    container: '.dock-container', 
    itemWidth: 40, 
    proximity: 90, 
    halign : 'center' 
}); 

答えて

0

あなたが魚眼レンズプラグインがどのように機能するかを見れば、あなたはそれがleftプロパティをアニメーション表示されます.dock-containerのあなたのmousemoveコードは.dock-containerという左のプロパティもアニメーション化するので、最終的にあなたのコードは魚眼レンズと戦っています。 leftアニメーションがお互いに戦わないように、コードを動かして親をアニメーション化する(例えば、dock、別のdivでdockをラップしてアニメーション化する)ことを検討する必要があります。 jsFiddleを設定すると、試して修正することができます。それ以外の場合は、私のソリューションがうまくいくかどうかを言うのはかなり難しいです。

+0

ありがとうございました!それはうまくいった! – smallhours

0

私はmousemoveイベントをラッピングdivに置くべきだと考えています - hoverintentプラグインも見てください。

関連する問題