开发者

how did SO animate answer div

I am wondering for some time now, how did SO do this animation on answers when you click on link answer, answer divs color changes for some time and it reverts back, I'm sure this question has been asked before but I just couldn't find it. Or this random example :

https://stackoverflow.com/questions/2706443/what-pitfalls-if-any-are-there-to-开发者_如何学JAVAlearning-c-c-as-a-first-language/2706531#2706531

UPDATE

I see some good answers, but not quite what I'm looking for or maybe I'm sleepy , for ex:

I have a div with id #footer , so if I type http://mysite.com#footer it will scroll me down to the footer div, how can I pass the argument which div to animate by just visiting the url http://mysite.com#footer


Take a look at the page source. Near the top there's this. I don't know much about jQuery, but it looks like a jQuery color animation for the answer element.

$(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);
                }
            }
        );

It fades to white ('#FFF') over the course of 2000 milliseconds.


Using jQuery's Color plugin is the easiest way to animate colors:

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

Once that plugin is included, you can animate any colors. For example, to set an element to yellow and then slowly fade it back (over 5 seconds, say):

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

Of course, you can use hex colors instead of the color names as well (ex. "#FFFF00" instead of yellow).


You would probably find everything you needed in the javascript file for the site.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜