Question

当我显示它时，我试图将div向左滑动，当我隐藏它时向右滑动div，但我不想使用jQuery。有没有办法在不使用JavaScript库的情况下进行简单动画并支持IE7和IE8？

这是我的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>

Answer 1

以下是一个可以帮助您入门的功能：

    <!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的动画，左右滑动

1 个答案: