获取Javascript div以在出现时滑出
[英]Get Javascript div to slide out on appear
问题描述
Got a bit of basic JS here that I want to slide out rather than just appear (looks glitchy) 
在这里有一些基本的JS，我想滑出而不是仅仅出现（看起来有些毛病）
I've tried a few things but just cant manage it, any ideas? 我已经尝试了一些方法，但是无法管理，有什么想法吗？ heres the code followed by the Jsfiddle: 以下是Jsfiddle后面的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
body{margin:0;}
#foo{min-width:400px; height:100%; background-color:#9C0; display:none; position:absolute; right:0px; top:0px;}
</style>
<body>
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo" >
</div>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
</body>
</html>
3 个解决方案
解决方案1
5 已采纳 2013-07-04 10:21:17
I've update your fiddle, using VanillaJS as you can see here it works perfectly well 我已经更新了您的小提琴，使用VanillaJS ，您可以在这里看到它运作良好
document.getElementById('bar').onclick = (function()
{
var that, interval, step = 20,
id = document.getElementById('foo'),
handler = function()
{
that = that || this;
that.onclick = null;
id = document.getElementById('foo');
interval =setInterval (function()
{
id.style.right = (parseInt(id.style.right, 10) + step)+ 'px';
if (id.style.right === '0px' || id.style.right === '-400px')
{
that.onclick = handler;
clearInterval(interval);
if (id.style.right === '-400px')
{
id.style.display = 'none';
}
step *= -1;
}
else
{
id.style.display = 'block';
}
},100);
};
return handler;
}());
The code explained: 代码说明：
- Attach the click handler in JS, because we're going to have to unbind/bind it dynamically 在JS中附加点击处理程序，因为我们将不得不动态地取消绑定/绑定
- instead of assigning a handler directly, I'm using a closure (for the interval and DOM references) 而不是直接分配处理程序，而是使用闭包（用于时间间隔和DOM引用）
-
handleris the actual event handler, which assigns its context (the clicked element) tothat, so we can reference it in the interval callback and unbinds the handler.handler是实际的事件处理程序，它指定它的上下文（点击的元件），以that，所以我们可以在区间回调引用它和解除绑定处理程序。 - The interval changes the position of the element by
steppixels (set this value to whatever you like).间隔以step像素为单位更改元素的位置（将此值设置为您喜欢的任何值）。 - If the div is at position 0 or -400, cancel the interval (that's why we need the closure, to keep the interval ID in scope, but not expose it globally), and re-bind the click handler,
step *= -1, to invert the animation如果div在位置0或-400处，请取消间隔（这就是为什么我们需要闭包，以将间隔ID保留在范围内，而不是在全局范围内公开它），然后重新绑定单击处理程序， step *= -1，反转动画 - Set the display property 设置显示属性
This interval sequence is set to occur every 100ms, which is a bit shaky, lower the value of set to 10, and set the interval at 50 should smoothen things out 将此间隔序列设置为每100ms发生一次，这有点不稳定，将set的值降低为10，并将间隔设置为50应该可以使情况变得平滑
解决方案2
1 2013-07-04 10:08:25
If I understood you correctly then, use jQuery for sliding effects. 如果我对您的理解正确，请使用jQuery进行滑动效果。
JS: JS：
$("a").on('click', function() {
$("#foo").slideToggle();
});
解决方案3
-1 2013-07-04 10:11:21
I've updated your fiddle for use of jQuery; 我已经更新了您使用jQuery的小提琴； http://jsfiddle.net/wRWHw/2/ http://jsfiddle.net/wRWHw/2/
function toggle_visibility(id) {
$("#" + id).slideToggle("slow");
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.