中央のjQueryアコーディオン（幅はjQueryで計算されます）は奇妙な動作を表示します！

Question

すべての画像は320pxです。

デフォルトでは、コンテナの幅（アンカータグ）は78pxに設定されています。

アンカータグを1つホバーすると、310pxに展開されます。

私はそれらを中心にしたいと思っていました。margin: 0 auto〜#accordion ulです。

センターを整えるために、固定幅を#accordion ulに指定できませんでした。だから私は動的にjQueryでその幅を計算しました。

しかし、アンカータグを置くと、全体の幅が変わります（1つの画像は310pxに拡大されます）。 310-78px（私の数学が正しいかどうかわからない）をする必要があります。私は最後の画像を合わせると

それは動作しますが、

1. は、私はいくつかの奇妙な振る舞いを取得します。
2. #accordion ulは、カーソルを置くまで中央に配置されません（デフォルトで中央に配置する必要があります）。

あなたはここでそれを確認することができます：http://alexchen.info/brianfunshine/

任意の提案を？

JS：

var $j = jQuery.noConflict(); 

$j(document).ready(function() { 
    /** 
    * jQuery Accordion 
    */ 
    $j('#accordion ul li a').hover(function() { 
     // if the element is currently being animated (to a easeOut)... 
     if ($j(this).is(':animated')) { 
      $j(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad"}); 
     } else { 
     // ease in quickly 
      $j(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad"}); 
     } 
     }, function() { 
     // on hovering out, ease the element out 
     if ($j(this).is(':animated')) { 
      $j(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad"}) 
     } else { 
     // ease out slowly 
     $j(this).stop('animated:').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad"}); 
     } 
    }); 
    /** 
    * Calculate the size of all the images inside the Jquery Accordion 
    */ 
    var customWidth = $j('#accordion ul li a').outerWidth(true); 
    var customNumber = $j('#accordion ul li a').size(); 
    // add extra 78px if it is hovered 
    $j('#accordion ul li a').hover(function() { 
     $j('#accordion ul').css('width', (customWidth*customNumber+242) + 'px'); 
     }, function() { 
     var cssObj = { 
      'width' : customWidth*customNumber, 
     } 
     $j('#accordion ul').css(cssObj); 
    }); 
}); 

は、HTML：

<div id="accordion"> 
     <ul> 
      <?php // Create and run custom loop 
       $custom_posts = new WP_Query(); 
       $custom_posts->query('post_type=page_content&page_sections=Slider (Front Page)'); 
       while ($custom_posts->have_posts()) : $custom_posts->the_post(); 
      ?> 
      <li class="landscapes"><?php the_content(); ?><></li> 
      <?php endwhile; ?> 
     </ul> 
    </div> 

Answer 1

これは私があなたのアンカータグを使用したい浮かべ、比較的位置付け要素（とIE7のバグが原因finessingのほんの少しを取りましたリスト項目全体を記入してください）、私はあなたに後方互換性のあるソリューションを提供したいと思います。

ここ概念がオーバーフローであなたの< UL/>をラップすることです：自動でセンタリングされて隠されたコンテナは/右余白を残し、それがメニューリストをクリッピング処理してみましょう：

1. は順不同リストの展開幅を に設定すると、 要素がリストブロックの下に をドロップせずにスライドするための十分な揺れの余地ができます。親コンテナ はオーバーフローを隠すので、 は問題になりません。

   div.menu 
   { 
       width: 700px; 
       height: 200px; 
       margin: 0 auto; 
       overflow: hidden; 
   } 
   
   ul 
   { 
       margin: 0; 
       padding: 0; 
       height: 200px; 
       width: 1400px; 
       display: block; 
       list-style: none; 
       overflow: hidden; 
   } 
   

2. .NOT（） セレクタを使用して 最後のリスト項目からあなたのホバー機能のバインドを解除。 オーバーフローがクリッピングされるため、 はこのアイテムのサイズを変更する必要はありません。最高の我々は それをまったくアニメーションしようとしないでください。

   $j('ul > li').not(".people2").hover(function(){...}); 
   

3. 、（ブロック幅でそれを維持する）100％ に と高さを幅、絶対にその 位置を設定し、各リスト項目と 巣内のアンカーの内部に相対的に配置 コンテナを追加メニューサイズを固定します。この は、あなたのアンカーが リストの全幅と高さにわたるようにします。 アイテムは常にあります。

   CSS

   ul > li > div 
   { 
       position: relative; 
   } 
   
   ul > li > div > a 
   { 
       position: absolute; 
       width: 100%; 
       height: 200px; 
   } 
   

   HTML

   <li class="people"> 
       <div> 
        <a href="#people"></a> 
       </div> 
   </li> 
   

this jsfiddle page

で例を参照してください私は、このソリューションの優雅さは、それがjQueryの計算の必要性を排除することだと思うし、代わりに、CSSに完全に依存して、あなたの望む効果を生み出します。これが参考になることを願っています！