자바 스크립트 슬라이드 효과 onclick

Question

"onclick"을 사용하여 DIV에 슬라이드 & 페이드 효과를 추가하고 싶습니다. 완전히 자바 스크립트입니다.

코드

은 여기에 있습니다 : http://jsfiddle.net/TCUd5/

ID = "pulldown_contents_wrapper"가 밀어해야하는 DIV. 이 DIV는 또한 트리거하는 SPAN에 포함되어

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

을 그리고 나는 SPAN의 온 클릭을 제어하는 ​​JS 코드가 생각 :

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은 훨씬 쉽지만 순수 자바 스크립트를 사용하면 더 쉽게 할 수 있습니다.

는 CSS에서 당신은 다음 요소의 위치를 ​​변경하려면 자바 스크립트, 그것은 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; 
} 

를 사용해야합니다.

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(); 

편집 - 제공 jQuery 코드

전화 jQuery 라이브러리, 가장 쉽게 구글

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

를 호스팅에서 수행 호버 기능을 할

$(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'를 다시 사용하면 효과는 마우스를 올려 놓은 클래스의 특정 인스턴스에서만 발생합니다. 이 애니메이션이 당신이 요구 한 것과 정확히 일치하는지 모르겠지만 질문을 올바르게 이해하면 주 기능이 작동합니다. 귀하의 필요에 맞게 번호 등을 변경하십시오.