javascriptANDJquery/brightness.html at master · sadique43/javascriptANDJquery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html>
<head>
<script type="text/javascript">
var opacityval=0;
var intervalid=0;
var id=0;
function fadein()
{
var img=document.getElementById("image");
opacityval=Number(window.getComputedStyle(img).getPropertyValue("opacity"));

opacityval=opacityval-0.1;
img.style.opacity=opacityval;

if(opacityval==0)
{
alert("Task Completed::::>Image completly fade in");
clearInterval(id);
}
}

function fadeout()
{

var img=document.getElementById("image");


opacityval=opacityval+0.1;
img.style.opacity=opacityval;

if(opacityval==1)
{
<!--alert("Task Completed::::>Image completly fade out");-->
clearInterval(id);
}
}

/*function start()
{

id=window.setInterval(fadein,30);
}
function stop()
{


id=window.setInterval(fadeout,30);
}*/


</script>
</head>
<body>
<button onclick="fadein()" >Decrease Brightness</button><br><br>

<img src="city.jpg" width="300" id="image"/><br><br>
<button onclick="fadeout()" id="btn2">Increase Brightness</button>

</body>
</html>