mostafabibin2
Well-Known Member
سلام دوستان. من این کد را نوشتم که با زدن دکمه ها opacity رو کم و زیاد کنه اما کار نمیکنه! مشکل کجاست؟
[JSS]<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fade ion and Fade out</title>
<style type="text/CSS">
div.contentbox
{
background:#09F;
height:300px;
width:500px;
padding:100px;
}
</style>
<script type="javascript">
var fade_in_from = 0;
var fade_out_from = 10;
// fade in function
function fadeIn (element)
{
var target = document.getElementById("element");
target.style.display = "block"
var setting = fade_in_from / 10;
target.style.opacity = setting;
fade_in_from++;
if (fade_in_from == 10)
{
target.style.opacity = 1;
clearTimeout(loopTimer);
fade_in_from = 0;
}
var loopTimer = setTimeout("fadeIn(\"" + element + "\")",50);
}
function fadeOut (element)
{
var target = document.getElementById("element");
var setting = fade_out_from / 10;
target.style.opacity = setting;
fade_out_from--;
if (fade_out_from == 0)
{
target.style.opacity = 0;
target.style.display = "none"
clearTimeout(loopTimer);
fade_out_from = 10;
}
var loopTimer = setTimeout("fadeOut(\"" + element + "\")",50);
}
</script>
</head>
<body>
<button onClick="fadeIn('div1')">FADE IN </button>
<button onClick="fadeIn('div1')">FADE Out </button>
<div id="div1" class="contentbox"> This is content </div>
<button onClick="fadeIn('div2')">FADE IN </button>
<button onClick="fadeIn('div2')">FADE Out </button>
<div id="div2" class="contentbox"> This is content </div>
<button onClick="fadeIn('div3')">FADE IN </button>
<button onClick="fadeIn('div3')">FADE Out </button>
<div id="div3" class="contentbox"> This is content </div>
</body>
</html>
[/JSS]
[JSS]<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fade ion and Fade out</title>
<style type="text/CSS">
div.contentbox
{
background:#09F;
height:300px;
width:500px;
padding:100px;
}
</style>
<script type="javascript">
var fade_in_from = 0;
var fade_out_from = 10;
// fade in function
function fadeIn (element)
{
var target = document.getElementById("element");
target.style.display = "block"
var setting = fade_in_from / 10;
target.style.opacity = setting;
fade_in_from++;
if (fade_in_from == 10)
{
target.style.opacity = 1;
clearTimeout(loopTimer);
fade_in_from = 0;
}
var loopTimer = setTimeout("fadeIn(\"" + element + "\")",50);
}
function fadeOut (element)
{
var target = document.getElementById("element");
var setting = fade_out_from / 10;
target.style.opacity = setting;
fade_out_from--;
if (fade_out_from == 0)
{
target.style.opacity = 0;
target.style.display = "none"
clearTimeout(loopTimer);
fade_out_from = 10;
}
var loopTimer = setTimeout("fadeOut(\"" + element + "\")",50);
}
</script>
</head>
<body>
<button onClick="fadeIn('div1')">FADE IN </button>
<button onClick="fadeIn('div1')">FADE Out </button>
<div id="div1" class="contentbox"> This is content </div>
<button onClick="fadeIn('div2')">FADE IN </button>
<button onClick="fadeIn('div2')">FADE Out </button>
<div id="div2" class="contentbox"> This is content </div>
<button onClick="fadeIn('div3')">FADE IN </button>
<button onClick="fadeIn('div3')">FADE Out </button>
<div id="div3" class="contentbox"> This is content </div>
</body>
</html>
[/JSS]