Question

我正在尝试开发自己的水平手风琴而不必使用插件。它应该占用整个浏览器窗口宽度。手风琴部分在mouseenter上打开。

它或多或少的工作（允许该部分在悬停在另一个部分之前完全展开），但是，如果部分快速盘旋，手风琴的整个宽度会缩小，因为“选定”部分需要更长的时间比小部分增长。

我需要让手风琴保持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");
    }
});

我如何确保我的jquery水平手风琴总是占用100％的宽度？

1 个答案: