JavaScript隐藏/显示动画_Javascript

JavaScript隐藏/显示动画

javascript

JavaScript隐藏/显示动画,javascript,Javascript,我想点击我的图片，让它消失，然后移到右边的另一个位置。目前，我的图像从屏幕右侧消失。请帮助我使用timeout（）创建允许隐藏和显示图像的代码 php code <div id= "ben" style= "position: relative; visibility: visible;" onclick="moveRight()" > <img src = "images/ben.JPG" height = "250" width = "200" alt= "Picture

我想点击我的图片，让它消失，然后移到右边的另一个位置。目前，我的图像从屏幕右侧消失。请帮助我使用

timeout（）

创建允许隐藏和显示图像的代码

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;

php代码
//用于在不同位置隐藏/显示图像的JavaScript
var-ben=null；
变量动画；
函数init（）{
ben=document.getElementById（'ben'）；
ben.style.position='relative'；
ben.style.left='0px'；
}
函数moveRight（）{
ben.style.left=parseInt（ben.style.left）+10+'px'；
animate=setTimeout（moveRight，20）；//在20秒内调用moveRight
}
函数停止（）{
clearTimeout（动画）；
ben.style.left='0px'；
}
window.onload=init；

我个人肯定会使用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;

..只需调整CSS中的From和To，将其移动得更远或更近

以及相关的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:）使用内置的toggle（）函数，它实际上可以变得更简单

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;
} });

（注意……您必须包括Jquery库，并调用$（document）.ready（function（）{如果您计划使用此代码

而且，你不必再在HTML中做onclick

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

即。。。

由于Jquery正在为您处理它，所以使用click（）

我个人肯定会使用Jquery来完成这项工作