我需要一个div opacity fading脚本的帮助。 [英] i need help with a div opacity fading script.
本文介绍了我需要一个div opacity fading脚本的帮助。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要帮助修剪和纠正我失败的div淡化脚本。
请帮助。
< pre lang =xml> < html >
< script > ;
函数fader1（）{
document.getElementById（myid）。style.opacity = a;
}
var a = 100;
do
{
fader1（）
}
while（--a）;
< / script >
< div id = myid >
这是文本。
< / div >
< / html >
解决方案
这是我的fadeElem.js文件的内容。
用法：
mFadeIn（ document .getElementById（ ' idOfElementToFade'），nameOfFunctionToCallWhenFadeComplete）;或者，如果你不想在淡入淡出完成时做任何事情，不要提供回调
mFadeIn（ document .getElementById（' idOfElementToFade'））;mFadeOut具有相同的语法，它只是向相反方向淡化。
var totalTime = 100 ; // ms的时间
var ANIMATION_STEPS = 10 ; // num步从0％到100％或100％到0％
var ANIMATION_DELAY = totalTime / ANIMATION_STEPS; // 步骤之间的毫秒数
函数 mFadeIn（元素，回调）
{
element.style.opacity = 0.0;
element.style.display = block;
var stepSize = 1 / ANIMATION_STEPS;
setTimeout（ function （）{mAnimStep（element， 0 ，stepSize， true ，callback）}，ANIMATION_DELAY）;
}
function mFadeOut（element，callback）
{
element.style.opacity = 1.0;
element.style.display = block;
var stepSize = 1 / ANIMATION_STEPS;
setTimeout（ function （）{mAnimStep（element， 0 ，stepSize， false ，callback）}，ANIMATION_DELAY）;
}
function mAnimStep（element，iteration，stepSize，boolIsFadeIn，callback）
{
< span class =code-keyword> if （iteration< ANIMATION_STEPS）
{
if （boolIsFadeIn == true ）
element.style.opacity =（iteration * stepSize）;
else
element.style.opacity =（ANIMATION_STEPS - iteration）* stepSize;
迭代++;
setTimeout（ function （）{mAnimStep（element，iteration，stepSize，boolIsFadeIn，callback）}，ANIMATION_DELAY）;
}
else
{
element.style.opacity = ;
if （boolIsFadeIn == false ）
element.style.display = < span class =code-string>' none';
if （！（（callback == null ）||（callback == undefined ）））
{
callback（）;
}
}
}
尝试使用jQuery，这里有一些例子：
http://www.w3schools.com/jquery/tryit.asp?filename = tryjquery_fadeout [ ^ ]
http://www.w3schools.com/jquery/ jquery_fade.asp [ ^ ]
我不喜欢使用第三方jQuery插件。有没有办法用普通的JavaScript做到这一点？
I need help trimming and correcting my failing div fading script.
Please help.
<html>
<script>
function fader1() {
document.getElementById("myid").style.opacity= a;
}
var a = 100;
do
{
fader1()
}
while (--a);
</script>
<div id="myid">
This is text.
</div>
</html> 解决方案
Here's the contents of my fadeElem.js file.
Usage:
mFadeIn(document.getElementById('idOfElementToFade'), nameOfFunctionToCallWhenFadeComplete);or, if you dont want to do anything when fading is complete, dont supply a callback
mFadeIn( document.getElementById('idOfElementToFade') );mFadeOut has the same syntax, it just fades in the opposite direction.
var totalTime = 100; // time in ms var ANIMATION_STEPS = 10; // num steps to go from 0% to 100% or 100% to 0% var ANIMATION_DELAY = totalTime / ANIMATION_STEPS; // number of ms between steps function mFadeIn(element, callback) { element.style.opacity = "0.0"; element.style.display = "block"; var stepSize = 1 / ANIMATION_STEPS; setTimeout(function(){mAnimStep(element,0,stepSize, true, callback)},ANIMATION_DELAY); } function mFadeOut(element, callback) { element.style.opacity = "1.0"; element.style.display = "block"; var stepSize = 1 / ANIMATION_STEPS; setTimeout(function(){mAnimStep(element,0,stepSize, false, callback)},ANIMATION_DELAY); } function mAnimStep(element, iteration, stepSize, boolIsFadeIn, callback) { if (iteration < ANIMATION_STEPS) { if (boolIsFadeIn == true) element.style.opacity = (iteration * stepSize); else element.style.opacity = (ANIMATION_STEPS - iteration) * stepSize; iteration++; setTimeout(function(){mAnimStep(element,iteration,stepSize,boolIsFadeIn, callback)}, ANIMATION_DELAY); } else { element.style.opacity = ""; if (boolIsFadeIn == false) element.style.display = 'none'; if (!((callback==null)||(callback==undefined))) { callback(); } } }
Try using jQuery, some example here:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout[^]
http://www.w3schools.com/jquery/jquery_fade.asp[^]
I prefer not using the third-party jQuery plugin. Are there Any ways to do this with normal JavaScript?
这篇关于我需要一个div opacity fading脚本的帮助。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
