没有jQuery的动画，幻灯片左，右 [英] Animation without jquery, slide left and right
本文介绍了没有jQuery的动画，幻灯片左，右的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想，当我告诉它，它滑动时，我隐藏它的权利，一个div向左滑动，但我不想使用jQuery。有没有办法做简单的动画，并支持IE7和IE8不使用JavaScript库？
下面是我的显示/隐藏JS：
功能显示隐藏（）{
VAR埃利奥特=的document.getElementById（'丹尼尔'）的style.display。 如果（埃利奥特==块）{
。的document.getElementById（'丹尼尔'）的style.display =无;
}其他{
的document.getElementById（'丹尼尔'）的style.display =块。
};
};
HTML看起来像：
＆LT; A HREF =＃的onclick =显示隐藏（）;返回false;＆gt;点击ME＆LT; / A＆GT;＆LT; DIV ID =丹尼尔的风格=显示：块;宽度：300像素，高度：50像素;＆GT;
＆LT;！ - 一些东西 - ＆GT;
＆LT; / DIV＆GT;
解决方案
下面是一个可以让你开始了一个功能：
＆LT;！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // ENhttp://www.w3.org/TR/html4/strict.dtd ＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;风格＆GT;
#yea {
保证金左：100px的;
高度：100像素;
宽度：100像素;
背景：蓝色;
边框：1px的黑色固体;
}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID ='啊'＆GT;＆LT; / DIV＆GT;
＆LT;输入类型=按钮值=能力表的onclick =animateMe（）; ＆GT;
＆LT;脚本＆GT;功能animateLeft（OBJ，从，到）{
如果（由＆GT; =到）{
obj.style.visibility ='隐藏';
返回;
}
其他{
VAR箱= OBJ;
box.style.marginLeft =从+PX
的setTimeout（函数（）{
animateLeft（物镜，从+ 1，）;
}，25）
}
}功能animateMe（）{
animateLeft（的document.getElementById（'雅'），100，700）;
}
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
https://jsfiddle.net/geh7ewLx/
I am trying to slide a div to the left when I show it and slide it to the right when I hide it, but I don't want to use jQuery. Is there a way to do simple animation and support IE7 and IE8 without using a javascript library?
Here is my show/hide js:
function showHide() {
var Elliot = document.getElementById('Daniel').style.display;
if (Elliot == "block") {
document.getElementById('Daniel').style.display = "none";
} else {
document.getElementById('Daniel').style.display = "block";
};
};
HTML would look like:
<a href="#" onclick="showHide();return false;">click me</a>
<div id="Daniel" style="display:block; width: 300px; height: 50px;">
<!-- some stuff -->
</div>
解决方案
Below is a function that can get you started:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#yea {
margin-left: 100px;
height: 100px;
width: 100px;
background: blue;
border: 1px black solid;
}
</style>
</head>
<body>
<div id='yea'></div>
<input type="button" value="Capacity Chart" onclick="animateMe();" >
<script>
function animateLeft(obj, from, to){
if(from >= to){
obj.style.visibility = 'hidden';
return;
}
else {
var box = obj;
box.style.marginLeft = from + "px";
setTimeout(function(){
animateLeft(obj, from + 1, to);
}, 25)
}
}
function animateMe() {
animateLeft(document.getElementById('yea'), 100, 700);
}
</script>
</body>
</html>
https://jsfiddle.net/geh7ewLx/
这篇关于没有jQuery的动画，幻灯片左，右的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
