6

div を表示するときは左にスライドさせ、非表示にするときは右にスライドさせようとしていますが、jQuery を使用したくありません。javascript ライブラリを使用せずに簡単なアニメーションを作成し、IE7 と IE8 をサポートする方法はありますか?

これが私の表示/非表示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>
4

1 に答える 1

10

以下は、開始できる関数です。

    <!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/

于 2013-08-30T21:34:47.107 に答える