0

基本的に私が持っているのは4つのdivで、それぞれが設定された高さで始まり、マウスオーバーするとdivが高くなるようにアニメーション化されるため、元の画像のスニークピークではなく、背景画像が完全に表示されます。あなたは私がここに持っているものを見ることができます：

http://jsfiddle.net/u2DK7/

基本的に私がやりたいのは、ボックスの1つにカーソルを合わせると、コンテンツを押し下げるのではなく、コンテンツの上に展開することです。簡単に絶対測位を試しましたが、必要なものではないようです。

もう1つ疑問に思っていたのは、アニメーションの指示を1回だけ機能させる方法があるかどうかです。前後にホバリングしてから、キューに入れたアニメーションのアコーディオンスタイルの効果を見るのはかなりクールですが、それは私が実際に機能させたい方法ではありません。

ちなみに、4つの個別のdivを設定せずに背景画像を変更できるように、HTMLコードにスタイルタグを保持する必要があります。

前もって感謝します！

4

1 に答える 1

0

要素を絶対的に配置し、前の兄弟に基づいて左からの距離を計算することを選択します。

ここでjsFiddleを動作させます

jQuery

$.each($('.fourboxes'), function(i,v){
  if(i == 0){
   $(v).css('left', '10px');
  }else{
    var prevDiv = $(this).prev('.fourboxes');
    var pWidth = prevDiv.width();
    var pleft = prevDiv.position().left;
    $(v).css({'left' : pWidth + pleft + 10 +"px"});
  }        
});

CSS

.fourboxes {
    position:absolute;
        left:10px;
    height: 200px;
    width: 139px;
    border:1px solid red;
    background-color:blue !important;

}

于 2012-07-08T04:01:15.417 に答える