2

私は現在、会社のWebサイト用のシンプルなインタラクティブマップに取り組んでいます。私たちはフラッシュから完全に離れようとしています。

私がやっていることは、地図上にcss円（背景色とcss3の丸い角のリンク）としてポイントを作成し、カーソルを合わせるとサイズがわずかに拡大することです。

私が遭遇した問題は、ホバーアニメーションが完全にスムーズではないということです。円の性質上、下に移動せずにホバーで外側に拡張するには、円の位置をわずかに移動する必要がありました（ホバーアニメーションの終了時に上下に5ピクセル）。マウスを外すと、元のサイズと位置に戻りますが、ピクセルがジャンプして乱雑に見えることがあります。

これが私の現在のプロトタイプへのリンクです：http ：//clients.taylordesign.com/td/map_v02/interactive-map.html

では、アニメーションを完全にスムーズにする方法はありますか？

私はこれをMac、ユキヒョウ、クローム、Firefoxで見ています。

$(document).ready(function(e) {

$('a.location').each(function() {

    var pos = $(this).find('span').position();
    var posLeftHover = (pos.left - 5);
    var posTopHover = (pos.top - 5);

    $(this).hover(function() {
        $(this).find('span').stop(true, false).animate({
            height: '25px',
            width: '25px',
            left: posLeftHover,
            top: posTopHover
        }, 200);
    }, function() {
        $(this).find('span').stop(true, false).animate({
            height: '15px',
            width: '15px',
            left: pos.left,
            top: pos.top
        }, 200);
    });
});

});
4

1 に答える 1

1

スパンを 25x25 ボックスに配置し、CSS を使用してそのボックス内の中央に垂直および水平に配置しようとします。次に、位置をアニメーション化する必要はなく、サイズだけをアニメーション化します。より滑らかな印象になると思います。

http://jsfiddle.net/9LXSv/

CSS:

.box {width:25px; height:25px; text-align:center; position:absolute;}
.dot {width:15px; height:15px; vertical-align:middle; background:red; display:inline-block;}​

HTML:

<div class="box" style="left:100px; top:100px;">
  <span class="dot"></span>
</div>

<div class="box" style="left:200px; top:100px;">
  <span class="dot"></span>
</div>
​

JS:

$(document).ready(function(e) {

  $('.box').hover(function() {
    $(this).find('span').animate({
      height: '25px',
      width: '25px'
    }, 200);
  }, function() {
    $(this).find('span').animate({
      height: '15px',
      width: '15px'
    }, 200);
  });
});

​
于 2012-07-10T16:37:34.427 に答える