Try this:
$ (function () {
var active=null;
$('.workmenuitem').bind('mouseenter',function() {
if(active==null)
{
active=$(this);
active.find("img").stop().animate({"opacity" : 1,
"left" : "15px"});
}
}).bind('click', function () {
active.find("img").stop().animate({"opacity" : .3,"left" :
""});
active=$(this);
active.find("img").stop().animate({"opacity" : 1,
"left" : "15px"});
});
$('.workmenuitem img').animate({
"opacity" : .3
});
});
I think it will solve your problem.
2009/6/2 Adriana <adrianal...@gmail.com>
>
> (I hope I'm not posting this twice... the last one didn't seem to go
> out)
>
> I've been looking for an "Ajax CMS" but decided to learn jQuery to
> learn how to code it myself in order to earn 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>
>
--
Gustavo Salome Silva
