Animation without jquery, slide left and right

问题

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>

回答1:

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/

来源：https://stackoverflow.com/questions/18541407/animation-without-jquery-slide-left-and-right

标签

javascript

animation

hide

show

show-hide