Плавное изменение цвета ссылок jQuery

19 марта 2012 17:54, Shalyminova:

Плавное изменение цвета ссылок jQuery:
Плавное изменение цвета ссылок jQuery

Добрый день друзья! Сегодня рассказ пойдет о том, как сделать плавное изменение цвета ссылки на сайте с использованием библиотеки jQuery. Не люблю больших вступлений, поэтому начнем.
1. Первым шагом к осуществлению данного эффекта будет подключение библиотеки jQuery. Скачать вы ее можете отсюда Создаем в корне сайта папку js и кидаем в нее этот файл. Далее открываем файл header.php вашего шаблона (для WordPress) и между тегами

<head></head>

прописываем следующее

<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/fadeLinks.js"></script>

2. Создаем файл fadeLinks.js, который будет отвечать за изменение цвета ссылок. Содержимое файла будет таким

this.fadeLinks = function() { 

 var selector = "a"; //modify this line to set the selectors
 var speed = "normal" // adjust the fading speed ("slow", "normal", "fast")

 var bgcolor = "#fff";  // unfortunately we have to set bg color because of that freakin' IE *!$%#!!?!?%$!
       //please use the same background color in your links as it is in your document. 

 $(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);
   $("span.two",$(this)).css("background",bgcolor);
  $("span.one",$(this)).css("opacity",1);
  };
  $("span.two",$(this)).css("opacity",0);
  $("span.two",$(this)).css("position","absolute");
  $("span.two",$(this)).css("top","0");
  $("span.two",$(this)).css("left","0");
  $(this).hover(
   function(){
    $("span.one",this).fadeTo(speed, 0);
    $("span.two",this).fadeTo(speed, 1);
   },
   function(){
    $("span.one",this).fadeTo(speed, 1);
    $("span.two",this).fadeTo(speed, 0);
   }
  )
 });
};

$(document).ready(function(){
 fadeLinks();
});

Закидываем данный файл в созданную ранее папку js.

3. Задаем стили для ссылок

a{
   color:# #F00;
   text-decoration:none;
   font-weight:bold;
}
   a span.two{
   color:#00F;

}

Так как вы используете уже готовый шаблон для сайта, то обязательно для ссылок у вас будет прописано оформление, а значит вам нужно его подредактировать и добавить новый класс a span.two. Редактируете и добавляете все в файле style.css вашей темы.

Сохраняйте и можно смотреть результат.
Источник: jQueryList.ru

Учеба не удалась? Единственный выход —трудовые дипломы. Диплом — визитная карточка специалиста.

Из блога Писклова

Рубрики: Без рубрики.

«  
  »