利用jQuery创建一个类似Skype上应用的按钮特效

如果使用Skype的人,大家都会注意到它的动画按钮。当您点击它的图标时,在左边“跳跃一下”或者图标在滚动。

演示:

jQuery-SkypeButtons

例子1 :http://blog.moocss.com/jQuery/demo2/SkypeButton1.html
例子2 :http://blog.moocss.com/jQuery/demo2/SkypeButton2.html

关键代码;

jQuery Code :

1
2
3
4
5
6
7
8
9
 
 $(document).ready(function(){
            $(".button").hover(function(){
                $(".button img")
                .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
                .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
                .animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
            });
        });

下载:

http://blog.moocss.com/jQuery/demo2/

站点统计