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

這不是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??? (;) 

快樂編碼。

Answer 2

有幾個問題需要解決，以便放置滑塊工作。

參見本工作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有一個csstop聲明，將其更新爲0，它迫使內容去下面的容器高度的方法：

#individuals, #organizations { 
    top:0; 
} 

3）

與灰色劣化使用的背景圖像具有在底部具有白色空間，31px在尺寸高度，這是造成你的div比背景高的錯覺。您將需要修復該圖像。

在這裏你有一個固定的，右鍵單擊並保存。

---

有了這兩個變化，看到在工作小提琴例子，你有你的問題解決了！