The above a small example shows a picture of the fade, but the actual situation may have multiple objects, switching between different objects, in fact, the same principle, just add a number of different parameters, control the opening and closing of the timer, the following to show in a number of div to switch back and forth, to achieve the fade.
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<style type= "Text/css" >
/******************* There are two styles of transparency here, and the main solution is compatibility issues between the two ****************/
div{Width:100px;height:100px;background:red;margin:10px;filter:alpha (opacity:30); opacity:0.3;}
</style>
<script type= "Text/javascript" >
Window.onload = function () {
var odiv = document.getelementsbytagname (' div ');
var i=0;
for (i=0;i<odiv.length;i++) {
Odiv[i].timer = null; Add your own timers to each div, so you can avoid interaction, though a bit wasteful, but it should be worth it.
odiv[i].alpha=30; Add your own transparency to each div to prevent mutual influence
Odiv[i].onmouseover = function () {
Startmove (this,100); Sets the transparency of the current div to 100
}
Odiv[i].onmouseout = function () {
Startmove (this,30);
}
}
};
function Startmove (obj,itarget) {//Set two parameters here, set the object and the target value to be changed
Clearinterval (Obj.timer);
var ispeed = 0;
Obj.timer = setinterval (function () {
if (obj.alpha<itarget) {//compare transparency of current DIV and target
Ispeed = 10;
}else{
Ispeed =-10;
}
if (obj.alpha==itarget) {
Clearinterval (Obj.timer);
}else{
Obj.alpha+=ispeed;
Obj.style.filter = ' alpha (opacity: ' +obj.alpha+ ') ';
obj.style.opacity = obj.alpha/100; Sets the style of the current div transparency
}
},30);
}
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
This is a small example, you can dig some ideas from inside
Multi-object fading, multi-object motion frame
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
