元素淡入,但不淡出
Element fading in, but not fading out
我有以下javascript
function fadeIn(objectID, amount) {
object = document.getElementById(objectID + 'Des');
if(amount > 0)
{
object.style.display ='block';
object.style.opacity = '0';
}
var i = 0;
animatefadein = function()
{
var MIN_OPACITY = 0;
var MAX_OPACITY = 1;
if ( (amount > 0 && object.style.opacity < MAX_OPACITY) || (amount < 0 && object.style.opacity > MIN_OPACITY))
{
var current = Number(object.style.opacity);
var newopac = current + Number(amount);
object.style.opacity = String(newopac);
setTimeout('animatefadein()', 50);
}
}
animatefadein();
if(amount < 0)
{
object.style.display ='none';
}
}
我需要将显示设置为 none,因为如果用户浏览它们,则需要在其顶部放置另一个元素。
这是 HTML,
<div id='products'>
<img src = './product1.png' usemap='#ourProducts' alt='Our Products' title='Hover over the names to find out more.'>
<map id='ourProducts' name='ourProducts'>
<area shape='rect' coords="55,55,210,110" href='#' id='forcePort' alt='ForcePort' title='ForcePort' onmouseover='fadeIn("forcePort",0.1)' onmouseout='fadeIn("forcePort",-0.1)'/>
<area shape='rect' coords="105,248,270,290" href='#' id='quickPort' alt='QuickPort' title='QuickPort' onmouseover='fadeIn("quickPort",0.1)' onmouseout='fadeIn("quickPort",-0.1)'/>
<area shape='rect' coords="390,260,535,303" href='#' id='scrinter' alt='Scrinter' title='Scrinter' onmouseover='fadeIn("scrinter",0.1)' onmouseout='fadeIn("scrinter",-0.1)'/>
<area shape='rect' coords="675,242,835,292" href='#' id='bugTrail' alt='Bug Trail' title='Bug Trail' onmouseover='fadeIn("bugTrail",0.1)' onmouseout='fadeIn("bugTrail",-0.1)'/>
<area shape='rect' coords="688,42,858,138" href='#' id='dataExtract' alt='CRM Data Extractor' title='CRM Data Extractor' onmouseover='fadeIn("dataExtract",0.1)' onmouseout='fadeIn("dataExtract",-0.1)'/>
</map>
<div id='productDes'>
<div id='scrinterDes'>
Data that needs to be shown!
</div>
<div id='bugTrailDes'>
</div>
<div id='quickPortDes'>
</div>
<div id='forcePortDes'>
</div>
<div id='dataExtractDes'>
</div>
</div>
</div>
如您所见,淡出不起作用。此外,如果您在 setTimeout 循环中放置一个计数器并将其打印到控制台,您将看到它在淡出事件上循环了无数次。这是有问题的网站,
网站
只需转到显示屏上的产品,然后将鼠标悬停在产品名称上即可。
我希望
你意识到这很容易用jQuery http://jquery.com/完成 脚本的问题在于Opacity
和Display
是两个不同的CSS属性,要做到这一点,你需要将Opacity
设置为0,将Display: none
更改为block
或inline-block
,然后对Opacity
进行动画处理
在这里看到它:http://jsfiddle.net/V8SAx/
首先,你永远不应该这样称呼setTimeout
:setTimeout('animatefadein()', 50)
,因为它使用eval
,这是非常缓慢和不安全的。
其次,这里有代码:
function fadeIn(objectID, amount,callback) {
object = document.getElementById(objectID + 'Des');
object.style.display ='block';
object.style.opacity = String(Number(amount<0));
animatefadein = function()
{
var MIN_OPACITY = 0;
var MAX_OPACITY = 1;
if ( (amount > 0 && object.style.opacity < MAX_OPACITY) ||
(amount < 0 && object.style.opacity > MIN_OPACITY)
){
var current = Number(object.style.opacity);
var newopac = current + Number(amount);
console.log(current + Number(amount));
object.style.opacity = String(newopac);
setTimeout(animatefadein, 50);
}else{
if(amount<0){object.style.display='none';}
if(callback){callback();}
}
}
animatefadein();
}
fadeIn('a',0.1,function(){fadeIn('a',-0.1);});
我添加了对回调的支持,该回调是在淡入淡出过程之后调用的,也许您会感兴趣。
相关文章:
- Javascript将图像src更改为淡入淡出
- css(或jQuery)悬停时淡入淡出
- 将淡入淡出添加到“我的身体背景滑块”
- 多重潜水淡入淡出打开
- 添加/删除类淡入淡出不起作用
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- 使用jquery淡入淡出
- 淡入淡出脚本不起作用
- 具有淡入淡出效果的全背景图像
- 纯 JavaScript 淡入淡出 - 淡入不起作用
- 帧淡出/淡入
- 如何在onClick事件中使用ReactJS淡出/淡入内容
- 淡出 ->淡入无法正常工作
- JQuery 淡出/淡入以创建排序列表
- 无法让元素淡出/淡入
- 正在添加'淡出/淡入'响应媒体查询
- jQuery:具有淡入和淡出(淡入)的图像
- Div won't淡出/淡入
- 淡出/淡入和上卷jquery效果
- 如何根据 SELECT 更改淡出/淡入视图