• Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Исходники, Скрипты, Коды, Шаблоны, Примеры, Прикрепления, Инструменты и тп. » Скрипты jQuery, Примеры на jQuery и подобное » Анимационный эффект выдвигающегося блока инфы (infoblock $.animate())
Анимационный эффект выдвигающегося блока инфы
Дата: Вторник, 30.08.2011, 11:06 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Анимационный эффект выдвигающегося блока инфы (infoblock $.animate())

Вариант №1. Играемся с width и opacity

CSS
Code
<style type="text/css">
#block{position:relative;width:350px;margin:0 auto;}
.infoblock{height:300px;width:0px;float:left;position:absolute;overflow:hidden;filter:alpha(opacity=0);opacity:0;background-color:#f4f4f4;}
#id0{left:220px;}
</style>


JavaScript
Code
<script type="text/javascript">
function onShow(id){var obj=$('#'+id);
if(obj.width()=='0'){obj.animate({width:'350px',opacity:'1'},1000)}
else{obj.animate({width:'0px',opacity:'0'},1000)}};
</script>


HTML
Code
<div id="block"><a href="javascript://" onclick="onShow('id0');return false;">Инфо</a>
<div class="infoblock" id="id0"><img class="imgLeft" src="/_example/_img/_girls/aj_170x140.jpg" width="170" height="140" alt="AJ" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</div>
</div>




Вариант №2. Играемся с width, opacity и left

CSS
Code
<style type="text/css">
#block{position:relative;width:350px;margin:0 auto;}
.infoblock{height:300px;width:0px;float:left;position:absolute;overflow:hidden;filter:alpha(opacity=0);opacity:0;background-color:#f4f4f4;}
#id1{left:0px;}
</style>


JavaScript
Code
<script type="text/javascript">
function onShow1(id){var obj=$('#'+id);
if(obj.width()=='0'){obj.animate({width:'350px',opacity:'1',left:'220px'},1000)}
else{obj.animate({width:'0px',opacity:'0',left:'0px'},1000)}};
</script>


HTML
Code
<div id="block"><a href="javascript://" onclick="onShow1('id1');return false;">Инфо</a>
<div class="infoblock" id="id1"><img class="imgLeft" src="/_example/_img/_girls/aj_170x140.jpg" width="170" height="140" alt="AJ" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</div>
</div>


Пример ... (оба варианта) ...
...

Прикрепления: infoblock.rar (2.9 Kb)

 
Дата: Вторник, 30.08.2011, 21:00 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Анимационный эффект выдвигающегося блока инфы (infoblock $.animate())

Вариант №3. Играемся с zIndex, opacity и left

CSS
Code
#block{position:relative;width:350px;margin:0 auto;}
.infoblock{height:300px;width:0px;float:left;position:absolute;overflow:hidden;filter:alpha(opacity=0);opacity:0;background-color:#f4f4f4;}
#id2{left:0;top:0;width:350px;z-index:-1;}


JavaScript
Code
<script type="text/javascript">
function onShow2(id){var obj=$('#'+id);
if(obj.css('opacity')=='0'){obj.css({zIndex:'1'}).animate({opacity:'1',left:'220px'},1000)}
else{obj.animate({opacity:'0',left:'0px'},1000,function(){obj.css({zIndex:'-1'})})}};
</script>


HTML
Code
<div id="block"><a href="javascript://" onclick="onShow2('id2');return false;">Инфо</a>
<div class="infoblock" id="id2"><img class="imgLeft" src="/_example/_img/_girls/aj_170x140.jpg" width="170" height="140" alt="AJ" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</div>
</div>


Пример (все вместе, все три) ...


...

Прикрепления: infoblock_v0.rar (3.0 Kb)

 
Дата: Среда, 31.08.2011, 16:48 |
DesBR
Подполковник
Группа: Проверенные
Сообщений: 148
Награды: 0
Репутация: 1
Статус: Offline


вот я дурень - все время ставил функцию появления и скрытия на разные блоки, забыл что можно использовать условие с распознаванием ширины например... спс, буду знать!)

 
Дата: Понедельник, 20.02.2012, 18:51 |
kimi
Рядовой
Группа: Зарегистрированные
Сообщений: 9
Награды: 0
Репутация: 0
Статус: Offline


Доброго времени суток.
подскажите, как сделать все тоже только открытие данного меню без клика а просто наведением курсора на текст.


 
Дата: Понедельник, 20.02.2012, 19:01 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


kimi,
Quote (kimi)
Доброго времени суток.
подскажите, как сделать все тоже только открытие данного меню без клика а просто наведением курсора на текст.

Добрый)
Вот так:
Code
<a href="javascript://" onclick="return false;" onmouseover="onShow2('id2');" onmouseout="onShow2('id2');">Инфо</a>

...


 
Дата: Четверг, 23.02.2012, 12:48 |
kimi
Рядовой
Группа: Зарегистрированные
Сообщений: 9
Награды: 0
Репутация: 0
Статус: Offline


Спасибо, не ожидал что так быстро отреагируете)))

Добавлено (23.02.2012, 12:48)
---------------------------------------------
Не люблю просить о помощи но мучаюсь второй день, навожу курсор на текст, как по выше указанному, блок выезжает и тут же прячется,

Code
<table style="border-image: initial; ">  
   <tbody>  
     <tr>  
       <td style="border-image: initial; ">  
         <p style="margin-bottom: 0.0001pt; " class="MsoNormal"><o:p> <!--Start(infoblock0)-->  
             <style type="text/css">#block{position:relative;width:350px;margin:0 auto;}  
.infoblock{height:350px;width:0px;float:left;position:absolute;overflow:hidden;filter:alpha(opacity=0);opacity:0;background-color: #DCDCDC;}  
#id0{left:0;top:0;width:350px;z-index:-1;}
             </style>  
             <script type="text/javascript">function onShow0(id){var obj=$('#'+id);  
if(obj.css('opacity')=='0'){obj.css({zIndex:'1'}).animate({opacity:'1',left:'280px'},1000)}  
else{obj.animate({opacity:'0',left:'0px'},1000,function(){obj.css({zIndex:'-1'})})}};
             </script> </o:p></p>  
         <div id="block"><a onclick="return false;" onmouseover="onShow0('id0');" onmouseout="onShow0('id0');" style="font-size: medium; ">Электротехнические материалы</a>  
           <div id="id0" class="infoblock"><a href="/page/98">Технологии</a><br /><a href="/page/131">Каталог продукции</a><br /><a href="/page/132">Решение для горной промышленности</a><br /><a href="/page/133">Решение для строительства</a>  
           </div>  
         </div><!--//End(infoblock0)-->  
         <p> </p> </td>  
     </tr>


 
Дата: Четверг, 23.02.2012, 20:27 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


kimi,
Quote (kimi)
навожу курсор на текст, как по выше указанному, блок выезжает и тут же прячется,

А должно как?


 
Дата: Пятница, 24.02.2012, 12:03 |
kimi
Рядовой
Группа: Зарегистрированные
Сообщений: 9
Награды: 0
Репутация: 0
Статус: Offline


Quote (likbezz)
Quote (kimi)
навожу курсор на текст, как по выше указанному, блок выезжает и тут же прячется,

А должно как?


Хочется чтобы оно выезжало и можно было легко пройти по ссылке которая в блоке


 
Дата: Пятница, 24.02.2012, 12:36 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


kimi,
Quote (kimi)
Хочется чтобы оно выезжало и можно было легко пройти по ссылке которая в блоке

Code
<a href="javascript://" onclick="return false;" onmouseover="onShow2('id2');">Инфо</a>

... Вот только мне интересно, а как вы его закрывать будете? ) Или это не требуется?
...


 
Дата: Пятница, 24.02.2012, 12:47 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: Offline


likbezz, а может он имел ввиду, чтобы окно открывалось на определённое время?

 
Дата: Пятница, 24.02.2012, 13:01 |
kimi
Рядовой
Группа: Зарегистрированные
Сообщений: 9
Награды: 0
Репутация: 0
Статус: Offline


Наверное я не тот скрипт взял за основу, я хочу сделать выезжающее меню со ссылками, как тут в верхней строке.

 
Дата: Пятница, 24.02.2012, 14:29 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: Offline


kimi, смотри в этой теме я себе меню сделал, там и пример есть.
Если подойдёт, дам исходник. Там скрипты не используются.
Пример меню


 
Дата: Пятница, 24.02.2012, 14:56 |
kimi
Рядовой
Группа: Зарегистрированные
Сообщений: 9
Награды: 0
Репутация: 0
Статус: Offline


спасибо большое, решил остановиться на открытии блока по клику.

 
Дата: Пятница, 24.02.2012, 16:19 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


kimi,
Quote (kimi)
Наверное я не тот скрипт взял за основу, я хочу сделать выезжающее меню со ссылками, как тут в верхней строке.

Там готовый скрипт есть - бери и пользуй )
Вот он: _http://novaposhta.ua/public/js/jquery.dropmenu.js ... (в прикреплении)
Так что) ... так.

Прикрепления: jquery.dropmenu.js (4.1 Kb)

 
Дата: Суббота, 12.05.2012, 23:24 |
Генерал-майор
Группа: Проверенные
Сообщений: 386
Награды: 1
Репутация: 0
Статус: Offline


Доброго времени суток!
Подскажите пожалуйста, - я использую принципиально похожий метод но, это вобщем конопка у меня smile Т.Е. При наведении на область выежает меню, только вот не получается у меня засунуть туда текст, который и должен быть ссылкой...
вот то что я прописываю в css
Code
.demo {
display: block;
width: 220px;  
height: 200px;  
  position:relative;margin-top:50px; margin-left:0px;   
    }
.demo { overflow:hidden;}

.demo img.dva, .demo:hover img.raz { margin-left: 0px; }
.demo:hover img.dva { margin-left: 220px; }
.demo img.raz { margin-left: -150px; }
.demo img {
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
и вот, то что в теле страницы
Code
<a class="demo" id="tri" href="#">
<img class="raz" src="http://my3d.3dn.ru/images/2.jpg" height="200" width="220" alt=""/> Catalog
   <br/>  
  </a>

Не как не могу понять как в css или в теле сделать так что бы текст с ссылкой был внутри блока wacko

Добавлено (12.05.2012, 23:02)
---------------------------------------------
ссылка на сайт с этой кнопкой тэстовый сайт

Добавлено (12.05.2012, 23:24)
---------------------------------------------
p/s likbezz - У тебя имеются права админа на этом сайте

 
Скрипты и коды для юкоз - Форум аццкого кодера » Исходники, Скрипты, Коды, Шаблоны, Примеры, Прикрепления, Инструменты и тп. » Скрипты jQuery, Примеры на jQuery и подобное » Анимационный эффект выдвигающегося блока инфы (infoblock $.animate())
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:


Мобильная версия