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;
}

источник: плавное изменение цвета ссылок

Оставьте свой комментарий