0

jquery fisheyeプラグインで問題が発生した後、私は自分で同様のスクリプトを開発することにしました。（これも良い習慣です）。とにかく、私はAnimate（）関数に基づいて2つのjquery関数を作成しました。

最小化バブル

バブルをデフォルトのサイズに戻します

maximumBubble

バブルを大きく、高くし、別の画像も表示します（そのバブルのタイトル）

jQuery.fn.maximizeBubble = function(){
  $(this).animate({
    marginTop: '-300px',
    width: '300px',
  }, {
    duration: 200,
    specialEasing: {
      width: 'linear',
    },
    complete: function() {
    $(this).find("span").css("display" , "inline");
    }
  });
}

jQuery.fn.minimizeBubble = function(){

     $(this).animate({
                //top: '+=5',
                marginTop: '0',
                width: '80px',
              }, {
                duration: 100,
                specialEasing: {
                  width: 'linear',
                },
                complete: function() {
                    $(this).find("span").css("display" , "none");
                }
              });

}

次のコードも作成しました。一度に大きなバブルが1つしかないため、この場合の.each（）関数は必要ないことを知っています。

$(document).ready(function() {

    //First , the middle one will be big as default.
    $('#auto_big').maximizeBubble();

    //mouseOver - make it big , onMouseout - Stay Big (do nothing)
    $('.dock-item2').mouseover(function() {
        //mouseOver on another bubble- minimize the other one and maximize the current
        $('.dock-item2').each(function(){
            $(this).minimizeBubble();
        });
        $(this).maximizeBubble();
    });

});​

（私のコードのjsFiffle：http: //jsfiddle.net/T7gCL/1/）

問題は、http：//jsfiddle.net/T7gCL/1/embedded/result/で確認できるように、マウスを次のバブルに移動すると、すべてのバブルが「クレイジー」になり始めていることです。

1.この行動の理由を知っていますか？

2.どうすれば解決できますか？

3.私のコードを改善する方法について何か提案がありますか（たとえば：の代わりにeach()）？

4

1 に答える 1

0

非常に多くのホッピングがある理由の一部は、画像を絶対的に配置してからサイズを変更していることです。アプリケーションが何を要求するのかわかりませんが、今はそれらをフローティングにしてみます。アニメーションの動作は連鎖反応のようなもので、画像のサイズが変更されると、onMouseoverイベントが重なり合っている画像に伝播しているという仮説を立てます。フローティングレイアウトでこれが修正される場合があります。

アップデート

これはうまく機能しますが、あなたがやろうとしていることとは正確に一致しない可能性があります

$('.dock-item2').mouseenter(function(event) {
     event.stopPropagation()           

    $(this).maximizeBubble();
});
$('.dock-item2').mouseleave(function(event) {
     event.stopPropagation()           

    $(this).minimizeBubble();
});

あなたはまだあなたがそれらを含むdivで画像を整理している方法を作り直す必要があります

于 2012-03-06T21:22:17.887 に答える