0

我们的问题与此位置的 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 
        });
});
4

2 回答 2

1

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

请参阅此工作小提琴示例！

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)

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

#individuals, #organizations {
    top:0;
}

3)

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

这里有一个固定的，右键保存。 在此处输入图像描述

有了这两个更改，正如在 Fiddle 工作示例中看到的那样，您的问题就解决了！

于 2012-05-16T20:16:14.367 回答
0

您的主要问题不是 jQuery，而是您最初应用于 CSS 中的滑块元素的位置。您需要解决的是：如果您为top位置设置动画 - 确保它在您的 CSS 中明确定义并且不会覆盖margin-top. 只需使用此属性，您就可以解决问题。或者：（在您的 jQuery 代码中）而不是动画top位置，尝试使用margin-top. 但同样，必须在您的 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??? (;)

快乐编码。

于 2012-05-16T19:19:25.817 回答