浮動要素とjQueryの使用

Question

私は5つの横と4つのロゴのグリッドを持っています。

ユーザーがロゴをクリックすると、ロゴがグリッドにプッシュされ、サイト外に降ります。 1つが5番目のロゴをクリックするまで、すべてがスムーズに実行されます。あなたはここでそれを試すことができます：あなたは第五いずれかをクリックしたときにロゴでジャンプを修正する方法についての

logo hider

任意のアイデア？

$(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は非常に簡単です

は、ここに私のjQueryの。助けてくれてありがとう。

Answer 1

これは、簡単にやりたいことを意味のある目的にするために、順序付けされていないリストを作成することをお勧めします。

次に、<li>を相対的に配置し、画像を絶対的に配置することができます。このようにして画像をアニメートしても、グリッドのレイアウトが乱されることはありません。ちょうどイメージの代わりに最後に<li>を隠すだけです。私のクロムで、すべてがうまくいく

Answer 2

が、IE 7には全く機能していない、あなたの最初のアニメーション

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

の最後を削除「」marginBottomの後ろに、いくつかのブラウザは、別のパラメータを期待することがあります。