Javascript 幻灯片效果 onclick

Question

我想使用“onclick”使用纯 Javascript 向 DIV 添加滑动和淡入淡出效果。

代码在这里：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">

而且我认为控制 SPAN onclick 的 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 要容易得多，但使用纯 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();

编辑 - 提供的 jQuery 代码

调用 jQuery 库，最容易从 google 托管完成

<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”而不是类名可确保效果只发生在悬停的类的特定实例上。我不确定这个动画是否正是你所要求的，但如果我正确理解了这个问题，那么主要功能将为你工作。只需更改数字等以满足您的需求。