JavaScript隱藏/顯示動畫

我想單擊我的圖像並使其消失，並在不同位置向右移動。目前，我的圖片在屏幕右側運行。請幫助我使用timeout()創建代碼，該代碼允許我的圖像隱藏並顯示。JavaScript隱藏/顯示動畫

php code 
<div id= "ben" style= "position: relative; visibility: visible;" onclick="moveRight()" > 
<img src = "images/ben.JPG" height = "250" width = "200" alt= "Picture of Peek-a-boo Ben"/> 


//JavaScript for a hide/show image in different location 
var ben = null; 
var animate ; 
function init(){ 
    ben = document.getElementById('ben'); 
    ben.style.position= 'relative'; 
    ben.style.left = '0px'; 
} 
function moveRight(){ 
    ben.style.left = parseInt(ben.style.left) + 10 + 'px'; 
    animate = setTimeout(moveRight,20); // call moveRight in 20msec 
} 
function stop(){ 
    clearTimeout(animate); 
    ben.style.left = '0px'; 
} 
window.onload =init;

來源

2013-06-26 twilson44

是否有你沒有使用JQuery的原因？ – KyleK

jQuery.animate（）看起來相當簡單：「.animate（）方法允許我們在任何數字CSS屬性上創建動畫效果。」 http://api.jquery.com/animate/ – Paul

看看我的編輯我的答案....顯示你的JQuery版本....你可以選擇你想使用哪一個。 – KyleK

我肯定會親自使用jquery這個....

但是，如果你想在純JavaScript，這裏是....雖然動畫是使用CSS來完成。

//JavaScript for a hide/show image in different location 
var ben = null; 
var animate=0 ; 
function init(){ 
    ben = document.getElementById('ben'); 
} 

function toggled(){ 

    var image = document.getElementById('image2'); 
    if(animate==0){ 
    animate = 1; 
    image.className= "right";} 
    else if(animate==1){ 
    animate=0; 
    image.className= "left";} 
} 

window.onload =init;

DEMO HERE ....只是調整從和要在CSS來移動它更遠或更近

及相關三網融合

.right { 
-webkit-transform: translateX(150px); 
-webkit-animation-name: right; 
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: 1; 
} 

.left { 
-webkit-transform: translateX(0px); 
-webkit-animation-name: left; 
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: 1; 
} 
@-webkit-keyframes right { from { -webkit-transform: translateX(0px); } 
to { -webkit-transform: translateX(150px); }} 

@-webkit-keyframes left { from { -webkit-transform: translateX(150px); } 
to { -webkit-transform: translateX(0px); }}

編輯

這是使用JQuery ...沒有CSS需要.....所有這些代碼行上面^^減少到兩個.....得到愛Jquery :)它實際上LY可以使用內置的切換（）函數獲得更簡單，以.......

var tog=0; 
$('#ben').click(function(){ 
if(tog==0){$('#image2').animate({marginLeft: "250"}, 1500);tog=1; return false;} 
else if(tog==1){$('#image2').animate({marginLeft: "0"}, 1500);tog=0; return false; 
} });

DEMO HERE

（注意：是你必須包括jQuery庫，並調用$（文件）。就緒（函數（）{如果你打算使用此代碼...

而且，你不必在你的HTML的onclick做了...

ie... <div onclick="moveRight()">

在jQuery的處理它你，使用CL ick（）

來源

2013-06-26 04:55:00 KyleK

JavaScript隱藏/顯示動畫

回答

相關問題