为啥我的鼠标移出来的效果不显示。。。。。

源自：2-2 JS透明度动画

为啥我的鼠标移出来的效果不显示。。。。。

window.onload = function(){

var box = document.getElementById('box') ;

box.onmouseover = function(){

play(1);

}

box.onmouseout = function(){

play(0.3);

}

var alpha = 0.3 ;

function play(target){

var timer = null ;

var box = document.getElementById('box') ;

clearInterval(timer);

timer = setInterval(function(){

var speed = 0 ;

if(alert > target){

speed = -0.1;

}else{

speed = 0.1 ;

}

if(alpha == target){

clearInterval(timer);

}else{

alpha = alpha + speed;

box.style.opacity = alpha;

}

},30);

}

就是看不出是哪里错了。。。。

提问者：任性不是罪 2016-07-25 19:47

个回答

脑阔疼

2016-07-25 20:31:15

已采纳

window.onload = function() {
var box = document.getElementById('box');
box.onmouseover = function() {
play(1);
}
box.onmouseout = function() {
play(0.3);
}
}
var alpha = 0.3;
var timer = null;

function play(target) {
clearInterval(timer);

var box = document.getElementById('box');
var speed = 0;
timer = setInterval(function() {

if(alpha > target) {
speed = -0.01;
} else {
speed = 0.01;
}
if(alpha == target) {
clearInterval(timer);
} else {
alpha = alpha + speed;
box.style.opacity = alpha;
}
}, 3);
}
这个是我复制你的代码之后拉过去改的测试可以你对照下

1
脑阔疼

2016-07-25 20:36:07

window.onload = function() {
var box = document.getElementById('box');

box.onmouseover = function() {
play(100);
}
box.onmouseout = function() {
play(30);
}
var timer = null;//这俩货既不在上面的｛｝里
var alpha = 30;//也不在下面的｛｝里
function play(target) {

clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(alpha > target) {
speed = -10;
} else {
speed = 10;
}
if(alpha == target) {
clearInterval(timer);
} else {
alpha += speed;
box.style.opacity = alpha / 100;
}
}, 30);
}

}

0
任性不是罪

2016-07-25 20:28:31

window.onload = function(){
var box = document.getElementById('box') ;
var timer = null ;
box.onmouseover = function(){
play(100);
}
box.onmouseout = function(){
play(30);
}
function play(target){
var alpha = 30 ;
clearInterval(timer);
timer = setInterval(function(){
var speed = 0 ;
if(alpha > target){
speed = -10;
}else{
speed = 10 ;
}

if(alpha == target){
clearInterval(timer);
}else{
alpha += speed;
box.style.opacity = alpha/100;
}
},30);
}

}

0
脑阔疼

2016-07-25 20:23:31

第一：
if(alert > target){//这里应该是 alpha
speed = -0.1;
}else{
speed = 0.1 ;
}
第二：
function play(target){
var timer = null ;//这个变量应该声明在方法体外面。
var box = document.getElementById('box') ;

clearInterval(timer);

第三：
speed的绝对值为0.1 最后鼠标移出div可能会闪屏建议缩小然后同时缩小相应倍数计时器的间隔时间达到效果不变

0