如何做動畫回答div

我想知道現在有一段時間，當你點擊鏈接答案時，SO是如何做這個動畫的，回答divs顏色變化一段時間，它回覆，我敢肯定這個問題已被問過，但我無法找到它。或者這個隨便舉個例子：如何做動畫回答div

https://stackoverflow.com/questions/2706443/what-pitfalls-if-any-are-there-to-learning-c-c-as-a-first-language/2706531#2706531

UPDATE

我看到一些很好的答案，但不完全是我正在尋找或也許我困了，爲前：

我有一個ID爲#footer的div，所以如果我鍵入http://mysite.com#footer它會將我滾動到頁腳div，我怎樣才能通過訪問url來傳遞參數div來動畫http://mysite.com#footer

來源

2010-04-25 ant

這就是所謂的黃色淡化效果或技術：http://stackoverflow.com/search?q=yellow+fade – 2010-04-25 00:47:25

關於傳遞一個參數：他們沒有在SO（見下面的brainjam的答案），但你可以使用'window.location.hash'在JavaScript之後的哈希選擇器中讀取部分：https：//developer.mozilla.org/en/DOM/window.location – 2010-04-25 01:01:29

@Marcel Korpel感謝您的信息 – ant 2010-04-25 01:07:01

使用jQuery的顏色插件是動畫色彩最簡單的方法：

http://plugins.jquery.com/project/color

一旦該插件包括能夠繪製任何顏色。例如，一個元素設置爲黃色，然後慢慢淡出回（超過5秒，說）：

$("#something").css("background-color", "yellow") // set the background to yellow 
       .animate({"background-color": "white"}, 5000); // fade to white

當然，你也可以使用，而不是顏色名稱十六進制顏色以及（如「＃。 FFFF00「而不是黃色）。

來源

2010-04-25 00:51:38

@Timothy Armstrong當我在某個事件中調用此方法時，它可以正常工作，但只需單擊http：// url＃anyelement，可以傳遞任何元素，並且該特定元素將突出顯示 – ant 2010-04-25 01:18:03

要澄清，請單擊鏈接「網址＃anyelement」，並具有ID「anyelement」淡出的元素？在這種情況下，只需將$（「＃」+ window.location.hash）作爲選擇器，並向該元素添加click（）事件即可。 – 2010-04-25 01:20:46

偉大的，我正在尋找我認爲 – ant 2010-04-25 01:24:24

您可能會在網站的JavaScript文件中找到所需的所有內容。

來源

2010-04-25 00:41:39

@Josh K好吧，你說的對，我會找到它，如果我明顯需要幫助，從哪裏開始：D – ant 2010-04-25 00:44:26

對不起，我無法通過源頭找到它，因此短回答。 – 2010-04-25 01:00:25

看看頁面源代碼。靠近頂部有這個。我對jQuery瞭解不多，但它看起來像是一個jQuery彩色動畫的答案元素。

$(function() { 

     var finalColor = '#FFF'; 
     $('#answer-2706531').animate({ backgroundColor:finalColor }, 2000, 
      'linear', function() { 
       // shove the hex color into an element to easily compare rbg() numbers 
       var test = $('<span></span>').css('background-color', finalColor); 
       if ($(this).css('background-color') != test.css('background-color')) { 
        $(this).css('background-color', finalColor); 
       } 
      } 
     );

它消失爲白色（'#FFF'）超過2000毫秒的過程。

來源

2010-04-25 00:44:20 brainjam

@brainjam是這部分必要的，它創建了跨度元素？ 'var test = $（''）.css（'background-color'，finalColor）;' – ant 2010-04-25 01:05:24

@ c0mrade，'$（this）.css（'background-color'）'的格式爲'rgb （255,255,255）'。因此，將'＃FFF''與'rgb（255,255,255）'進行比較的最方便和獨立於瀏覽器的方式可能是創建一個臨時元素'test'並查看它的'background-color'。 – brainjam 2010-04-25 18:58:07

如何做動畫回答div

回答

相關問題