Четверг, 05 Июля 2012 13:57

SlideUp и SlideDown для появления элемента на странице

Written by 
Оцени эту запись
(14 Голоса)

SlideUp и SlideDown могут использоваться в анимации элемента на странице, как аналог fadeIn, fadeOut. Только в этом случае, элемент будет появляться не при помощи прозрачность, а выезжать сверху и сворачиваться обратно. То есть, вы можете скрытому элементу при каком-то событии задать SlideDown, чтобы его отобразить. И так же скрыть его обратно  - SlideUp.

 

 

Пример синтаксиса:

 

<div class="container">

<div class="arrow"></div>

<div class="body" style="display: none;">Некоторое содержание</div>

</div> 

 

$('.container .arrow').click(function(){

$('.body').slideDown('slow');

});

$('.container').mouseleave(function(){

$('.body').slideUp('fast');

});

 

У нас есть контейнер, который сожержит стрелочку и какую-то информацию. Информация скрыта. При клике на стрелочку, информация выезжает сверху контейнера. Когда курсор мыши покидает контейнер, информация пропадает снова.

 

Пример кода:

 

 

jQuery(document).ready(function(){
 
jQuery('#user_menu_cont3 .profile_user_menu_arrow').click(function(){
jQuery('#user_menu_cont3 .profile_user_menu_body').slideDown();
jQuery('#user_menu_cont3 .profile_user_menu_header').addClass('active');
});
jQuery('#user_menu_cont3 .profile_user_menu_body').mouseleave(function(){
jQuery('#user_menu_cont3 .profile_user_menu_body').slideUp();
jQuery('#user_menu_cont3 .profile_user_menu_header').removeClass('active');
});
}); 
 
 
Работа этого кода (кликните на стрелочку):
 
 
 
 
 
 
 
Подробнее о других видах подобной анимации читайте в статье Выпадающий список при клике на стрелочку
 
 
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов