没有使用jQuery的动画，左右滑动幻灯片

Question

没有使用jQuery的动画，左右滑动幻灯片

8

我想在显示时将一个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>

- user2219915

1

我会使用 CSS 过渡并优雅地降级至显示/隐藏功能，以适应不支持它的浏览器。 - Blender

有趣的变量名字。 - markasoftware

我使用这样的变量名来表明它们是变量 :) - user2219915

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marko · Accepted Answer

以下是一个可以帮助你入门的函数：

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