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>