JQuery tutorial –- Effect — Part 4

1. Animating

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Animating an Element</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#right”).click(function() {
$(“#theDiv”).animate({ width: “500px” }, 1000);
});
$(“#text”).click(function() {
$(“#theDiv”).animate({ fontSize: “24pt” }, 1000);
});
$(“#toggle”).click(function() {
$(“#theDiv”).animate({ left: “500” }, 1000, “swing”);
});
});
</script>
<style type=”text/css”>
div#theDiv {
position:relative;
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: cyan;
border: 2px solid black;
cursor: pointer;
}
p, span {
font-size: 16pt;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<p>
Animating an Element</p>
<div id=”theDiv”>Animate Me</div>
<button id=”right”>Grow Right</button>
<button id=”text”>Big Text</button>
<button id=”toggle”>Move Div</button>
</body>
</html>

2. fading

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Element Fading</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#fadein”).click(function() {
$(“#theDiv”).fadeIn(“normal”);
});
$(“#fadeout”).click(function() {
$(“#theDiv”).fadeOut(“normal”);
});
$(“#fadeto3”).click(function() {
$(“#theDiv”).fadeTo(“slow”, 0.3);
});
$(“#fadeup”).click(function() {
$(“#theDiv”).fadeTo(“slow”, 1.0);
});
});
</script>
<style type=”text/css”>
div#theDiv {
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: blue;
border: 2px solid black;
cursor: pointer;
}
p, span {
font-size: 16pt;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<p>
Fading an Element</p>
<div id=”theDiv”>
</div>
<button id=”fadein”>Fade In</button>
<button id=”fadeout”>Fade Out</button>
<button id=”fadeto3″>Fade To .3</button>
<button id=”fadeup”>Fade To 1.0</button>
</body>
</html>

3.Sliding, Show and hide

$(function() {
$(“#slideup”).click(function() {
$(“#theDiv”).slideUp(“normal”);
});
$(“#slidedown”).click(function() {
$(“#theDiv”).slideDown(“normal”);
});
$(“#toggle”).click(function() {
$(“#theDiv”).slideToggle(“slow”);
});

$(“#show”).click(function() {
$(“#theDiv”).show(“normal”);
});
$(“#hide”).click(function() {
$(“#theDiv”).hide(“normal”);
});
$(“#toggle”).click(function() {
$(“#theDiv”).toggle(“slow”);
});
});

4.Images rotating

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Image Rotator</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
// create the image rotator
setInterval(“rotateImages()”, 2000);
});

function rotateImages() {
var oCurPhoto = $(‘#photoShow div.current’);
var oNxtPhoto = oCurPhoto.next();
if (oNxtPhoto.length == 0)
oNxtPhoto = $(‘#photoShow div:first’);

oCurPhoto.removeClass(‘current’).addClass(‘previous’);
oNxtPhoto.css({ opacity: 0.0 }).addClass(‘current’).animate({ opacity: 1.0 }, 1000,
function() {
oCurPhoto.removeClass(‘previous’);
});
}
</script>
<style type=”text/css”>
#photoShow {
height:400px;
width:400px;
}
#photoShow div {
position:absolute;
z-index: 0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}
</style>
</head>
<body>
<h1>
jQuery-based Image Rotator</h1>
<div id=”photoShow”>
<div class=”current”>
<img src=”images/Grass.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Leaf.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Spring.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Water.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
</div>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s