Javascript slide effect onclick

Question

Я хотел бы добавить слайд & fade effect в DIV, с чисто Javascript, используя «onclick».

Код здесь: http://jsfiddle.net/TCUd5/

DIV, который должен скользить имеет ID = "pulldown_contents_wrapper". Этот DIV содержится в SPAN, который также вызывает его:

<span onclick="toggleUpdatesPulldown(event, this, '4');" style="display: inline-block;" class="updates_pulldown" > 
    <div class="pulldown_contents_wrapper" id="pulldown_contents_wrapper"> 

И я думаю, что код JS, который управляет OnClick Спан:

var toggleUpdatesPulldown = function(event, element, user_id) { 
    if(element.className=='updates_pulldown') { 
    element.className= 'updates_pulldown_active'; 
    showNotifications(); 
    } else { 
    element.className='updates_pulldown'; 
    } 
} 

Если не удается сделать это с чистый JS, у вас есть идея, как я могу это сделать с помощью Mootools? (* Я хотел бы использовать только чистую JS или фреймворк Mootols).

Я попытался реализовать код от: why javascript onclick div slide not working?, но без результатов.

Большое спасибо.

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

window.addEvent('domready', function() { 
     $('updates_pulldown').addEvents({ 
      mouseenter: function(){ 
      $('updates_pulldown').removeClass('updates_pulldown').addClass('updates_pulldown_active') 
      $('pulldown_contents_wrapper').set('tween', { 
       duration: 1000, 
       physics: 'pow:in:out', 
       transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out' 
      }).show(); 
      }, 
      mouseleave: function(){ 
      $('pulldown_contents_wrapper').set('tween', { 
       duration: 1000, 
       delay: 1000, 
       }).hide(); 
      $('updates_pulldown').removeClass('updates_pulldown_active').addClass('updates_pulldown') 
      }, 
     }); 
    }); 

    var toggleUpdatesPulldown = function(event, element, user_id) { 
     showNotifications(); 
    } 

Любая идея?

Answer 1

jQuery намного проще, но с чистым javascript вы можете это сделать.

В CSS вы должны будете использовать переходы

#thing { position:relative; 
    top: 0px; 
    opacity: 0.8; 
    -moz-transition: top 1s linear, opacity 1s linear; 
    -webkit-transition: top 1s linear, opacity 1s linear; 
} 

затем в JavaScript, когда вы меняете положение элемента, он должен изменить с помощью CSS переходов.

var toggleUpdatesPulldown = function(event, element, user_id) { 
    if(element.className=='updates_pulldown') { 
    element.style.top = someValue; //something like '100px' will slide it down 100px 
    element.style.opacity = '1.0'; //will fade the content in from 0.8 opacity to 1.0 
    element.className= 'updates_pulldown_active'; 
    showNotifications(); 

EDIT - при условии, JQuery код

вызов библиотеки JQuery, проще всего сделать из Google хостинг

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

сделать функцию Hover

$(document).ready(function() { 
     $('.updates_pulldown').hover(//first function is mouseon, second is mouseout 
      function() { 
       $(this).animate({top: '50px'}).animate({opacity: '1.0'}); 
      }, 
      function() { //delay 1000 milliseconds, animate both position and opacity 
       $(this).delay(1000).animate({top: '0px'}).animate({opacity: '0.5'}); 
      } 
     ) 
    }) 

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