如何确保我的 jquery 水平手风琴始终占据 100% 宽度？

Question

我正在尝试开发自己的水平手风琴，而无需使用插件。它应该占据整个浏览器窗口的宽度。手风琴部分通过鼠标输入打开。

它或多或少是有效的（前提是该部分在悬停在另一个部分上之前允许完全展开），但是，如果这些部分快速悬停在手风琴的整个宽度上，那么手风琴的整个宽度就会缩小，因为“选定”部分的增长时间比较小的部分。

我需要使手风琴保持 100% 浏览器宽度，但我不确定需要做什么才能实现此目的。

我创建了一个 jsFiddle 来说明（http://jsfiddle.net/AUu9E/），将鼠标滑过他们很快就能看到我正在尝试解决的问题。

非常感谢。

var qtySect = 6;
var windowWidth = $(window).width();
var selectedWidth = windowWidth * 0.7;
var unselectedWidth = windowWidth * 0.3 / (qtySect - 1);
$("nav ul li").fadeTo(0,0.6);
    //set initial widths
$(".unselected").css("width", unselectedWidth);
$(".liHome").css("width",selectedWidth).addClass("selected");
    //mouseover animate
$("nav ul li").mouseenter(function() {
    if ($(this).hasClass("unselected")){
            $(this).animate( { width: selectedWidth }, { queue: false, duration: 1000, easing: "linear" } )
        $(".selected").animate( { width: unselectedWidth }, { queue: false, duration: 1000, easing: "linear" } );
        $(".selected").addClass("unselected").removeClass("selected");
        $(this).addClass("selected").removeClass("unselected");
    }
});

Answer 1

嗯，你不能用百分比来代替吗？似乎消除了大量代码:)

似乎您需要使用“STEP”过程，以确保它们相互遵循。
可以在这里找到这样的示例 http://www.protofunc.com/scripts/jquery /animate-step/

http://jsfiddle.net/AUu9E/3/

HTML

<nav>
            <ul>
                <li class="liHome">home</li>
                <li class="liRsvp">rsvp</li>
                <li class="liStory">story</li>
                <li class="liVenue">venue</li>
                <li class="liGuestbook">guestbook</li>
                <li class="liGallery">gallery</li>
            </ul>
</nav>

JS

//Remove 1 element(selected), and find the width of the rest(unselected)
var qtySect = 6-1;
var unselectedWidth = 40 / qtySect +"%";
var selectedWidth = 60+"%";

    //set initial widths
$("nav ul li:first-child").addClass('selected');
$("nav ul li").not(':first-child').addClass('unselected');
$(".unselected").css("width", unselectedWidth);
$(".selected").css("width",selectedWidth);
    //mouseover animate
$("nav ul li").mouseenter(function() {
    if ($(this).hasClass("unselected")){
         $(this).animate( { width: selectedWidth }, { queue: false, duration: 1000, easing: "linear" } )
         $(".selected").animate( { width: unselectedWidth }, { queue: false, duration: 1000, easing: "linear" } );
        $(".selected").addClass("unselected").removeClass("selected");
        $(this).addClass("selected").removeClass("unselected");
    }
});