2011-02-10 2 views
0

私は次のjQueryスクリプトを使用して、内部のアンカーリンクのサイズと数に基づいてulの合計幅を計算しています(最初に各アンカータグの幅に数値を掛けます)。要素の合計幅を計算し、jQueryを使用してホバーしているときに余分なピクセルを追加しますか?

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(); 
    $j('#accordion ul').css("width", customWidth*customNumber); 
    // add extra 78px if it is hovered 
    $j("#accordion ul li a").hover(function(){$j('#accordion ul').css("width", (customWidth*customNumber)+78px);}); 
}); 

最後の部分は、アンカータグが上がったときに、ulに追加の78pxを追加することです。何らかの理由で動作していない(その行が追加されていると、幅が出力されない)。

提案がありますか?

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> 

答えて

1

あなたは数学の表現(番号+番号)を行い、その後、文字列を追加する必要があるため

$j("#accordion ul li a").hover(function(){$j('#accordion ul').css("width", (customWidth*customNumber+78) + 'px');}) 

を試してみてください。

関連する問題