編輯具有動畫效果的Css

我有一個絕對位置的div，默認的「top」值設置爲「-200px」。當我點擊該div時，「頂部」值更新爲「0」。這樣我就可以看到整個Div。編輯具有動畫效果的Css

這是JS：

$(document).ready(function(){ 
    $("#search_bar").click(function() { 
    $(this).css("top","0"); 
    }); 
});

有沒有辦法實現這個結果，但與動畫？例如，滑落效果？

此外，當我點擊另一次的股利我想，「頂部」的價值將恢復到「-200px」。

來源

2010-06-12 Pennywise83

使用.slideDown（）函數。 :) http://api.jquery.com/slideDown/ – edl 2010-06-12 22:42:37

@edl - '.slideDown（）'方法不會做OP所要求的。 – user113716 2010-06-12 23:49:07

當然。使用.animate()方法。而不是click事件，使用toggle它接受之前/之後的兩個函數。

直播示例：http://jsfiddle.net/a86tm/1/

$(document).ready(function(){ 

    $("#search_bar").toggle( // toggle() takes 2 functions 
     function() { 
      $(this).animate({top: 0}, 500); // Use animate() to animate the transition. 
     },         // The 500 argument is the duration. 
     function() { 
      $(this).animate({top: -200}, 500); 
     } 
); 

});

jQuery的文檔：

.toggle() - http://api.jquery.com/toggle
.animate() - http://api.jquery.com/animate

來源

2010-06-12 23:47:56 user113716

此代碼不適用於Google Chrome瀏覽器！控制檯給我這個錯誤：未捕獲的SyntaxError：第6行的意外標記ILLEGAL，它是腳本的最後一行。 – Pennywise83 2010-09-17 16:43:03

@Pennywise - 我猜你從jsFiddle複製了代碼？如果是這樣，有一些不可見的（非法）字符被複制。在代碼結束後刪除一些空白區域，或複製並粘貼上面的代碼。 – user113716 2010-09-17 16:52:55

編輯具有動畫效果的Css

回答

相關問題