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>