I am showing how to use the select option html form element.
http://awrdev.g3tech.in/imageanime.html
Whole page:
<html>
<title>jQuery image animations</title>
<head>
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<script src="/jquery/jquery.min.js"> </script>
<script>
var arr = [ ], el, type;
function onebyone(el) {
el.func(1000, function() {
el = arr.func2();
if(el == null) {
$('.vanish img').css({display: "block" });
$('body').append('<h2>Complete!</h2>').find('h2').slideUp(2000);
$('input[type=button]').attr('disabled', false);
return;
} else {
switch(type) {
case 'fadein':
el.func = el.fadeIn;
break;
case 'fadeout':
el.func = el.fadeOut;
break;
case 'slidein':
el.func = el.slideDown;
break;
case 'slideoutleft':
el.func = el.slideUp;
break;
case 'slideoutright':
el.func = el.slideUp;
break;
}
onebyone(el);
}
});
}
function FadeIn() {
$('.vanish img').css({display: "none" });
el = arr.shift();
el.func = el.fadeIn;
arr.func2 = arr.shift;
onebyone(el);
}
function FadeOut() {
$('.vanish img').css({display: "block" });
el = arr.shift();
el.func = el.fadeOut;
arr.func2 = arr.shift;
onebyone(el);
}
function SlideIn() {
$('.vanish img').css({display: "none" });
el = arr.shift();
el.func = el.slideDown;
arr.func2 = arr.shift;
onebyone(el);
}
function SlideOutLeft() {
$('.vanish img').css({display: "block" });
el = arr.shift();
el.func = el.slideUp;
arr.func2 = arr.shift;
onebyone(el);
}
function SlideOutRight() {
$('.vanish img').css({display: "block" });
el = arr.pop();
el.func = el.slideUp;
arr.func2 = arr.pop;
onebyone(el);
}
$(function() {
$('input[type=button]').click(function() {
$(this).attr('disabled', true);
$('.vanish img').each(function() {
arr.push($(this));
});
type = $('#animetype').val();
switch(type) {
case 'fadein':
FadeIn();
break;
case 'fadeout':
FadeOut();
break;
case 'slidein':
SlideIn();
break;
case 'slideoutleft':
SlideOutLeft();
break;
case 'slideoutright':
SlideOutRight();
break;
default:
break;
}
});
})
</script>
</head>
<body>
<h1> Image animations</h1>
<div id='topmenu'>
<select id='animetype'>
<option value=fadein >Fade In</option>
<option value=fadeout >Fade Out</option>
<option value=slidein >Slide In</option>
<option value=slideoutleft >Slide Out from left </option>
<option value=slideoutright >Slide Out from right </option>
</select>
<input type="button" value="Animate images"/>
</div>
<div class='vanish'><img src="images/forest1.jpg" /></div>
<div class='vanish'><img src="images/forest2.jpg" /></div>
<div class='vanish'><img src="images/island1.jpg" /></div>
<div class='vanish'><img src="images/island2.jpg" /></div>
<div class='vanish'><img src="images/mount1.jpg" /></div>
<div class='vanish'><img src="images/sunrise.jpg" /></div>
</body>
</html>
--
Gayatri Hitech
http://gayatri-hitech.com
_______________________________________________
ILUGC Mailing List:
http://www.ae.iitm.ac.in/mailman/listinfo/ilugc
ILUGC Mailing List Guidelines:
http://ilugc.in/mailinglist-guidelines
