在堆栈溢出的帮助下,我得到了如何在这里制作旋转木马/手风琴的答案:
http://www.jsfiddle.net/Mottie/UdUus/117/
平稳地打开/关闭,而不会移动整个事物。关键是很少使用的步骤属性。
但是,我试图找出如何调整此脚本以便onload,所有项目的宽度相同,然后在悬停时根据需要展开/收缩,然后在mouseleave上折叠回其原始状态。 / p>
我试过但无济于事。任何想法?
一个。
答案 0 :(得分:0)
HTML
<div id="promo">
<ul>
<li class="promo1">d</li>
<li class="promo2">d</li>
<li class="promo3">d</li>
<li class="promo4">d</li>
<li class="promo5">d</li>
</ul>
</div>
CSS:
#promo { width:404x; height:200px; overflow:hidden; }
#promo ul { width:105%; }
#promo li { float:left; height:200px; margin-right:1px; width:50px; }
#promo .promo1 { background:red;}
#promo .promo2 { background:green; }
#promo .promo3 { background:red; }
#promo .promo4 { background:green; }
#promo .promo5 { background:red; margin-right:0px; }
JS:
var panels = $('#promo li');
panels.hoverIntent(
function() {
if (!$(this).is('.expanded')) {
$(this).animate({
width: 200
}, {
step: function(width, ani) {
var w = Math.floor(width);
$('.expanded').css('width', (250 - w) + 'px');
$(ani.elem).css('width', (200 - w) + 'px');
},
duration: 500,
complete: function() {
panels.removeClass('expanded');
$(this).addClass('expanded');
}
});
}
}, function() {});
$("#promo").hover(function() {}, function() {
$("li.expanded", this).animate({
width: 50,
duration: 500
}).removeClass("expanded");
});
答案 1 :(得分:0)
更新了您的jsfiddle