1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | this.fadeLinks = function() { var selector = "div"; // устанавливает какой элемент должен обработать скрипт var speed = "normal" // скорость анимации ("slow", "normal", "fast") var bgcolor = "#fff"; // приходится устанавливать цвет фона для IE $(selector).each(function(){ $(this).css("position","relative"); var html = $(this).html(); $(this).html("<span class=\"one\">"+ html +"</span>"); $(this).append("<span class=\"two\">"+ html +"</span>"); if($.browser.msie){ $("span.one",$(this)).css({"background":bgcolor,"opacity":1}); $("span.two",$(this)).css("background",bgcolor); }; $("span.two",$(this)).css({"opacity":0,"position":"absolute","top":0,"left":0}); $(this).hover( function(){ $("span.one",this).stop().fadeTo(speed, 0); $("span.two",this).stop().fadeTo(speed, 1); }, function(){ $("span.one",this).stop().fadeTo(speed, 1); $("span.two",this).stop().fadeTo(speed, 0); } ) }); }; $(function() { fadeLinks(); }) |
css
1 2 3 4 5 6 7 | div{ color:#f30; } div span.two{ color:#069; cursor:pointer; } |
источник: плавное изменение цвета ссылок
Оставьте свой комментарий