動畫沒有jQuery，左右滑動

我試圖向左滑動一個div，當我將它展開並向右滑動時，我隱藏它，但我不想使用jQuery。有沒有辦法做簡單的動畫和支持IE7和IE8而不使用JavaScript庫？動畫沒有jQuery，左右滑動

這裏是我的顯示/隱藏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>

來源

2013-08-30 user2219915

我會用CSS tran並且優雅地降級爲不支持它的瀏覽器的顯示/隱藏。 – Blender

那裏有趣的變量名稱 – Markasoftware

我使用這樣的變量名，使它明顯是變量:) – user2219915

下面是一個功能，可以讓你開始：

<!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-30 21:34:47 Marko

謝謝，這是我一直在尋找的東西。目前IE8和IE7似乎不適合我...您的示例看起來像需要開放標記。 – user2219915

請嘗試以下更改，它適用於我的IE7和IE8。 – Marko

動畫沒有jQuery，左右滑動

回答

相關問題