2011-02-10 57 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);}); 
}); 

最後一部分是在錨標籤懸空時將其額外78px添加到ul。由於某種原因不起作用(如果添加了該行,寬度不輸出)。

有什麼建議嗎?

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');}) 

因爲你需要做一個數學表達式(號+號碼),然後添加一個字符串。

相關問題