Javascript 滑动效果 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12980955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript slide effect onclick
提问by George
I'd like to add a slide & fade effect to a DIV, with purely Javascript, using "onclick".
我想使用“onclick”向 DIV 添加幻灯片和淡入淡出效果，纯 Javascript。
The code is here: http://jsfiddle.net/TCUd5/
代码在这里：http: //jsfiddle.net/TCUd5/
The DIV that has to slide has id="pulldown_contents_wrapper". This DIV is contained in a SPAN, that also triggers it:
必须滑动的 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">
And I think the JS code that controls the SPAN onclick is:
我认为控制 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';
}
}
If it is not possible to make it with pure JS, do you have an idea how could I do it with Mootools? (*I'd like to use only pure JS or the Mootols framework).
如果不能用纯 JS 来实现，你知道我怎么用 Mootools 来实现吗？（*我只想使用纯 JS 或 Mootols 框架）。
I have tried to implement the code from: why javascript onclick div slide not working?but with no results.
我试图实现以下代码：为什么 javascript onclick div 幻灯片不起作用？但没有结果。
Thanks a lot.
非常感谢。
I have managed to make it with Mootools, but I can't figure it out how to add a slide & fade effect, and a delay on mouseout
我已经设法用 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();
}
Any idea?
任何的想法？
回答by Hat
jQueryis a lot easier, but with pure javascript you can do it.
jQuery简单得多，但使用纯 javascript 就可以做到。
In the CSS you'll need to use transitions
在 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;
}
then in the javascript when you change the position of the element, it should change via the css transitions.
然后在 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 - provided jQuery code
编辑 - 提供的 jQuery 代码
call the jQuery library, most easily done from the google hosting
调用 jQuery 库，最容易从谷歌托管完成
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
make the hover function
制作悬停功能
$(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'});
}
)
})
the function timing will be the same as whatever you set it to in the css with transition tags. using 'this' instead of the class name again makes sure that the effect only occurs on the specific instance of the class that is hovered over. im not sure if this animation is exactly what you were asking for, but if i understand the question correctly then the main functionality will work for you. just change the numbers and such to fit your needs.
函数计时将与您在带有过渡标签的 css 中设置的相同。再次使用“this”而不是类名可确保效果仅发生在悬停在类上的特定实例上。我不确定这个动画是否正是你所要求的，但如果我正确理解了这个问题，那么主要功能将适合你。只需更改数字等即可满足您的需求。
