Hi all,
Below is part of my HTML. What i want to do is when i click on a menu item e.g Home, Portfolio etc. I would like for the the contents of the "#slideshow" div to either hide or animate the opacity to 0, I have left it at fadeout for the minute to keep it simple.
<div class="container_12 .grid_10" id="header"><img src="images/logo.png" name="logo" width="460" id="logo" />
<ul class="dropdown_menu">
<li><a>Home</a></li>
<li><a>Portfolio</a></li>
<li><a>About Me</a></li>
<li><a>Services</a></li>
<li><a>Contact</a></li>
<li><a>Blog</a></li>
</ul>
</div>
<div class="container_12 .grid_10" id="slideshow">
<img src="images/image_1.jpg" id="image_1"/>
<img src="images/image_2.jpg" id="image_2"/>
<img src="images/image_3.jpg" id="image_3"/>
<img src="images/image_4.jpg" id="image_4"/>
<img src="images/image_5.jpg" id="image_5"/>
<img src="images/image_6.jpg" id="image_6"/>
</div>
This is the Jquery i have below. I have tried all the variations for selecting the menu items and "#slideshow" images i can, but nothing seems to work.
JQuery
$(document).ready(function(){;
$("a").click(function(){
$(this).find("#slideshow img").fadeout(3000)
});
});
Thanks once again