I've been looking for an "Ajax CMS" but decided to learn jQuery to
learn how to code it myself in order to keep earning some Geek-girl
cred among my male colleagues. I've learn a lot about jQuery in a
week but as you can imagine I still have a lot to learn.
I have successfully animated an image (move to the left and increase
opacity) when the mouse hovers a div and reset the image (move it back
to its original position and reset the opacity) when the mouse move
outside the div. So far so good...
Here comes the question for you Experts:
What I need to do -and don't know how to - is when the user clicks on
the div the image should stay in the hover position while still being
able to hover any other divs and activate the animation normally.
When a different div is clicked the previous "Clicked" div should
return (animate) to its original position and the new "Clicked" div
should stay in the hover position.
Content will be loaded when the divs are clicked but there won't be
page refresh since I'm loading the content by using the load funtion
of jQuery.
I'm including the code I have so far for you to take a look and please
don't hesitate in letting me know if my question isn't clear enough.
Thanks a lot in advance.
[code]
<!-- jQuery Code -->
<script type="text/javascript">
$ (function () {
$('.workmenuitem').hover(function() {
$(this).find("img").stop().animate({"opacity" : 1,
"left" : "15px"});
}, function () {
$(this).find("img").stop().animate({"opacity" : .3,
"left" : ""});
});
$('.workmenuitem img').animate({
"opacity" : .3
});
});
</script>
<!-- html Code -->
<div class="workmenuitem">
<a href="#" >
<img class="square" src="images/worklink_active.gif"
title="image link" />
</a>
</div>
<div class="workmenuitem">
<a href="#" >
<img class="square" src="images/worklink_active.gif"
title="image link" />
</a>
</div>
<div class="workmenuitem">
<a href="#" >
<img class="square" src="images/worklink_active.gif"
title="image link" />
</a>
</div>
