use*_*915 5 javascript animation show hide show-hide
当我显示它时,我试图将div向左滑动,当我隐藏它时向右滑动它,但我不想使用jQuery.有没有办法做简单的动画,并支持IE7和IE8而不使用JavaScript库？
这是我的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看起来像:
<a href="#" onclick="showHide();return false;">click me</a>
<div id="Daniel" style="display:block; width: 300px; height: 50px;">
<!-- some stuff -->
</div>
以下是一个可以帮助您入门的功能:
<!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/