0

横に 5 つ、下に 4 つのロゴのグリッドがあります。

ユーザーがロゴをクリックすると、ロゴがグリッドにプッシュされ、サイトからドロップアウトします。5 番目のロゴをクリックするまで、すべてがスムーズに実行されます。ここで試すことができます：

ロゴハイダー

5 番目のロゴをクリックしたときのロゴのジャンプを修正する方法についてのアイデアはありますか?

これが私のjQueryです：

    $(document).ready(function() {

$('.imageShowing').click(function() {

        if ($(':animated').length) {
        return false;
                    }
  $(this).animate({
    zIndex: '1',
    height: '100',
    width: '140',
    marginTop: '14px',
    marginLeft: '20px',
    marginRight: '20px',
    marginBottom: '14px',
  }, 100, function() {


    $(this).rotate({ angle:0,animateTo:90,easing: $.easing.easeInOutExpo })

    $(this).animate({
    zIndex: '1',
    top: '480',
    opacity: '0'
  }, 1000, function() {  
  $(this).hide("fast");  
    // Animation complete.
  });
  });
});

}); //end document.ready

私のCSS：

#wrapper { width: 1000px; margin: 0 auto; height: 1000px; position: relative;}
#grid {width: 935px; height: 531px; margin: 0 auto; background: url(images/grid.png) no-repeat center; padding:39px 4px 39px 11px; position: relative; z-index: 5;}
#logoWrapper {position: absolute; top: 38px; left: 36px }
#logoWrapper img { float: left; padding: 0 7px 6px 0; margin:0; position: relative; z-index: 6;}

#bottom { height: 500px; width: 950px; background: #fff; margin: 0 auto; position: relative; z-index: 10;}

HTML は非常に単純です。助けてくれてありがとう。

4

2 に答える 2

2

順序付けされていないリストを作成することをお勧めします。これにより、やりたいことが簡単になり、セマンティックな目的で使用できるようになります。

次に、<li>sを相対的に配置し、その中の画像を絶対的に配置できます。そうすれば、画像をアニメーション化してもグリッドのレイアウトが乱れることはありません。<li>画像だけでなく、最後にを非表示にするだけです。

于 2012-04-13T21:18:07.993 に答える
0

私のクロムではすべてうまくいきますが、IE 7では最初のアニメーションでまったく機能しません

$(this).animate({
    zIndex: '1',
    height: '100',
    width: '140',
    marginTop: '14px',
    marginLeft: '20px',
    marginRight: '20px',
    marginBottom: '14px',
  }

marginBottom の後ろの最後の ',' を削除すると、ブラウザによっては別のパラメータが必要になる場合があります。

于 2012-04-13T21:23:20.830 に答える