Прозрачность элементов на jQuery

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

В данном уроке я хочу представить «на ваш суд» эффект прозрачности картинки и текста. Эффект, мне кажется, неплохой и достоин рассмотрения. Служит он, конечно же, как и многие другие эффекты, для привлечения несколько большего внимания посетителей вашего сайта к той или иной части текста или к какому-либо изображению.

Для реализации такого эффекта на вашем сайте необходимо:

1. СКАЧАТЬ ИСХОДНИКИ (91 кб)

2. Распаковать архив в текущую папку на компьютере. В папке transparency Вы увидите:

папку images с изображением;
папку js с jQuery;
файл demo1.html;
файл demo2.html.

3. В используемом вами браузере поочередно откройте файлы demo1.html и demo2.html, проверьте работу скрипта.

4. Содержимое папок images и js закачайте в одноименные папки своего сайта. Эти папки находятся в корневой папке сайта. Если таковых у Вас не оказалось, их нужно создать.

Прозрачность картинки на jQuery

Демо-пример:

Вставка кода на страницу сайта

Участок кода подключения jQuery
(<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>)
и скрипт из файла demo1.html, который представлен в таблице внизу вставляем в head. Можно вставить и в body всю ниже представленную конструкцию целиком, так как скрипты можно располагать в разных вариантах. К примеру у Вас сайт на PHP и нет особого желания загромождать файл HEADER одноразовыми скриптами.

Если у Вас уже подключена библиотека jQuery последней или более поздней версии (на день публикации статьи - версия 3.1.1) или Вы используете удаленное подключение последней версии с сайта jQuery или Google API, разумеется, вторично подключать её не стоит.


<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.limp').each(function(){
    $(this).animate({opacity:'0.3'},1);
     $(this).mouseover(function(){
     $(this).stop().animate({opacity:'1.0'},600);
   });
   $(this).mouseout(function(){
   $(this).stop().animate({opacity:'0.3'},300); 
   });
});
});
</script>

Путь к файлу библиотеки jQuery;

В данной строке limp - название класса для создания прозрачности;

В этой строке задаётся начальная прозрачность элемента;

В данной строке задаётся прозрачность элемента при наведении курсора;

В этой строке задаётся прозрачность при уходе курсора с элемента.

А код изображения вставляем в body в определённое вами место:


<img src="images/изображение.jpg" class="limp" vspace="XX" hspace="XX"  
width="XXX" height="XXX" alt="Название">

Здесь прописать путь к картинке, отступы, размеры и название. Всё!

Прозрачность текста на jQuery

Демо-пример:

My Site is a personal site that gives you a central location to manage and store your documents, content, links, and contacts. My Site serves as a point of contact for other users in your organization to find information about you and your skills and interests. Content providers can use My Site as a method of customizing the information they present to users.

Вставка кода на страницу сайта:

Здесь все действия аналогичны первому варианту. Только лишь, вместо кода картинки вставляем код с текстом (в таблице внизу) - в нужное место раздела body:


<div class="limp">
<p>
My Site is a personal site.
</p> 
<p>
My Site is a personal site.
</p> 
</div>

Здесь пишите ваш текст.

Спасибо за внимание. Комментируйте статью. Всего Вам доброго. До скорой встречи! С уважением, Л.М.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки