PDA

View Full Version : New to jQuery looking for some general help



Moshambi
10-13-2009, 02:17 AM
Hello,

I am starting to learn how to utilize jQuery and the first thing I'm looking to do is make a photo gallery. What I want to do is to have some images and have them fadeout of view from one another. I know how to get the fadeOut() effect to work but what I am having trouble with is making the current image disappear. I've tried several methods but they all result in the same way...ALL of the images disappearing rather than the 1st one, click link 2nd disappears, click link 3rd one disappears, etc..

Here is what I most recently tried:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<script type="text/javascript" src="jquery-1.3.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){


$("#next").click(function(){

var $imgs = $("#holder").children();

if($($imgs).is(":hidden"))
{
$($imgs).next().fadeOut(3000);
}
else
{
$($imgs).fadeOut(3000);
}
});

});
</script>
</head>

<body>


<div id="holder" style="position: relative;">
<img src="shop1.jpg" alt="" id="first" />
<img src="shop2.jpg" alt="" id="second" />
<img src="shop3.jpg" alt="" id="third" />
<img src="shop4.jpg" alt="" id="fourth" />
</div>
<a href="#" id="next">Next</a>
</body>
</html>


Would appreciat anyone who could guide me on how to get the functionality I'm looking for.

Thanks,
Mosh