Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
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
30


Чувашия-это моя Россия

Функции отображения и сокрытия.

Без функций отображения и сокрытия просто трудно представить организацию страниц сайта в настоящее время. Выпадающие навигационное меню, всплывающие подсказки, всякие слайд-шоу и создания элементов пользовательского интерфейса.

В библиотеке jQuery есть такие функции как show(), hide(), fadeIn, fadeOut, fadeToggle(), fadeTo.

Функция show() показывает до этого момента скрытый элемент выборки. Значение аргумента функции есть время проявления элемента, но при этом анимация элемента начинается от верхнего левого угла к нижнему левому углу. Если скорость не задана, то проявляется мгновенно. Скорость проявления или, как там, появления элемента выборки указывается как аргумент функции show(), например, show(700). Цифра 700 - это семьсот миллисекунд, в течение которых выбранный элемент проявиться на экране монитора или 0.7 секунд.

Давайте проверим как все это происходит со всеми параметрами, то есть аргументами значений скорости анимации элементов выборки.

Создадим какой-то блок div с id="pokaz" с размерами 450х600 пикселей в квадрате и выделим для обозначения рамки этого блока красным цветом.

В этот блок разместим какое-то изображение и применим нашу функцию show(). Пусть, когда Вы наведете на блок курсором мыши картина медленно проявится. Заметьте, при этом свойство функции show() таково, что каритна как бы будет увеличиваться с левого верхнего угла. Напишем коды программы для этого случая:

                         < script type="text/javascript">$(document).ready(function(){
	                            $('#pokaz').mouseover(function(){
                                $('#pokaz').html('< img src="../chebok/dsc09536.gif" 
                                              id="projav"  height="450" width="600" >')
                                .hide()
                                .show();
                               });
                              });
                         < /script>  

Функция hide() скрывает видимый элемент. Значением аргумента является время исчезновения элемента страницы бесплатного сайта. Без аргумента функции исчезает мгновенно. При заданной скорости исчезает сужаясь.

Функция hide() противоположна дейстиям функции show() над элементами выборки документа на страницах Вашего сайта. И, надеюсь, никакого труда не испытываете в понимании свойств функции hide().

Функция fadeIn медленно проявляет на странице сайта выбранный элемент. Скорость проявления зависит от значения аргумента функции. Если аргумент явно не задан, то значение принимает normal = 400 миллисекунд.

Функция fadeOut медленно исчезает выбранный элемент на странице бесплатного сайта. Скорость исчезновения зависит от значения аргумента функции. Если аргумент явно не задан, то значение принимает normal=400 миллисекунд.

Функция fadeToggle проявляет или заставляет исчезать выбранный элемент на странице бесплатного сайта в зависимости видимый он или невидимый: если невидиый, то проявлет; если - видимый, то - скрывает. Скорость исчезновения или проявления зависит от значения аргумента функции. Если аргумент явно не задан, то значение принимает normal=400 миллисекунд.

Все свойства выше названных функции как бы лежат в одной плоскости, поэтому на этом останавливаться не станем. Вот, есть еще очень интересная функция fadeTo.

Функция fadeTo изменяет степень непрозрачности изображения до определенного значения от 0 до 1. Обычно, применяется для получения эффекта полупрозрачности. Здесь задавать аргумент фвункции обязательно. Кроме скорости имеется дополнительный аргумент степени прозрачности общее выражение функции fadeTo в связке над выбранным элементом представляется так:

                         $('селектор').fadeTo('значение_скорости', значение_прозрачности);
                         < script type="text/javascript">$(document).ready(function(){
	                                      $('#pokaz_1').mouseover(function(){
                                          $('#pokaz_1')
                                          .html('< img src="../chebok/dsc09536.gif" 
                                              id="projav"  height="450" width="600">')
                                          .hide()
                                          .stop()
                                          .fadeTo(1500,.5);
                                         });
                                        });
                         < /script>
                         < div id="pokaz_1" style=" border: 1px solid #F00; 
                                                    height: 450; 
                                                    width: 600; 
                                                    margin: 20px auto 20px 100px">
                         < /div>

Можете попрактиковаться с различной степенью прозрачности при действии функции fadeTo(2500,.3), в данном случае скорость проявления две с половиной секунды и значение прозрачности равно 0.3 .


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: