Help with disabling mouseover mouseout
Hi
I need som help with some code for my portofolio.
I have a row of thumbnails, that animates on mouseover and back to its original state on mouseout.
The code looks like this:
-
<script src="js/jquery.js"></script>
<script src="js/effects.core.js"></script>
<script src="js/effects.slide.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".img_container").mouseover(
function () {
$(this).animate({
height: "100px",
marginTop: "-20px",
backgroundImage: "url(assets/footer_shadow.png)",
}, 100 );}
);
$(".img_container").mouseout(
function () {
$(this).animate({
height: "80px",
marginTop: "0px",
backgroundImage: "url(assets/footer_shadow.png)",
}, 200 );}
);
$(".img_container").click(
function () {
$(this).removeClass("img_container");
$(this).addClass("active_img_container");
$(this).attr("id", 'active');
}
);
}); //close doc ready
</script>
My problem is, that when the user clicks one of the thumbnails, i want it to stay at its hovered position, and not react to mousover or mouseout before another one has been clicked.
What am i doing wrong?
Thanks in advance and have a great day!
/Aske