JQuery横幅下拉 - 动画是跳跃的，结束32像素太高

Question

我们的问题与此位置的jQuery动画有关：

http://www.simalam.com/leeanderson/profile/

单击下拉箭头查看动画...然后单击上拉箭头以关闭横幅。现在您已经看过了，我可以更好地描述问题所在。

动画在底部附近跳动，并以错误的位置结束（特别是32像素太高）。它开始在正确的位置。

我们尝试在每种可能的组合中切换-32和0。给我们我们喜欢的动画的唯一组合是两个if语句都是0 0。但是，我们不喜欢个人和组织下面的32像素白色边框。

如果有人有任何建议，我们将不胜感激。

以下是适用于它的代码：

/* code for dropdown of menu */
$("#dropArrow").click(function () { //with every click, the arrow should rotate
    value += 180; //for every click, add 180 degrees, so that it goes back to either pointing up or down with each click
    if ((value % 325) == 0) { //(hide) before hiding the .topDivSlideWrap, we do this first and restore css settings to default
        $( ".drop" ).css("top", "-0px"); //move .drop back to original positioning
        $( "#individuals" ).css("z-index", "0"); //remove z-index of #individuals
        $( "#organizations" ).css("z-index", "0"); //remove z-index of #individuals
    }   
    $('.topDivSlideWrap').slideToggle('slow', function() {;
    if (value % 325) { //(show), this is set in a callback function so it happens after slideToggle
        $( ".drop" ).css("top", "-32px"); //move .drop up to hide whitespace
        $( "#individuals" ).css("z-index", "1000"); //add z-index of #individuals
        $( "#organizations" ).css("z-index", "1000"); //add z-index of #individuals
    }
    });
    $('#rotate').rotate({  //function within a function
        animateTo:value,easing: $.easing.easeInOutCirc //rotate 180 degrees every time 
        });
});

Answer 1

要使滑块正常工作，您需要解决几个问题。

查看此工作Fiddle Example!

1）

您可以控制幻灯片，旋转可以大大减少到这个：

// reset variable
var value = 0;

$("#rotate").bind("click", function(e) {

    // prevent browser's default behavior
    e.preventDefault();

    // increment value to control rotation
    value+=180;

    // rotate arrow
    $(this).rotate({
        angle     : 0,
        animateTo : value,
        easing    : $.easing.easeInOutExpo
    });

    // slide contents
    $(".topDivSlideWrap").slideToggle("slow");

});

2）

#individuals和#organizations有一个css top声明，将其更新为0，它会强制内容低于容器高度：

#individuals, #organizations {
    top:0;
}

3）

与灰色降级一起使用的背景图像底部有一个白色空间，高度为31像素，这会导致你的div比背景高的错觉。您需要修复该图像。

在这里你有一个固定的，右键单击并保存。

---

通过这两个更改，如工作的小提琴示例所示，您的问题已经解决了！

Answer 2

这不是jQuery的主要问题，而是您最初应用于CSS中滑块元素的位置。您需要解决的问题是：如果您为top位置设置动画，请确保它在CSS中定义良好，并且不会覆盖margin-top。只需玩这个属性，你就可以解决你的问题。或者:(在您的jQuery代码中）而不是动画top位置，请尝试使用margin-top。但同样，Arr必须最初在CSS中定义值，以防止（例如）Safari浏览器不为元素设置动画。

---

其他一些“缩小”代码的建议：

使用逗号列出您的元素：

$( "#individuals, #organizations" ).css("z-index", "0"); //从元素列表中删除z-index。

$( "#individuals, #organizations" ).css("z-index", "1000"); //将z-index添加到元素列表

if (value % 325) {这就像你说的那样：if( 1 + 2) {只是模数（它没有意义）

比你有一个奇怪的错字：

$('.topDivSlideWrap').slideToggle('slow', function() {;  // <-- what is this??? (;)

快乐的编码。