Not having any luck with :hover, either with jquery or css - css

Question

Neither seem to work right for me. Starting with query:
<script>
$(function() {
$("#button1").hover(function() {
$("#button1").animate({opacity: 0.5}, 500);
});
});
</script>
This causes the opacity to shift down, but it doesnt resume on mouseleave. Jquerys hover page says to put a in and out action like so:
.hover( handlerIn(eventObject), handlerOut(eventObject) )
so when i do this it just gives me both animations on mouse in and again on mouseout:
<script>
$(function() {
$("#button1").hover(function() {
$("#button1").animate({opacity: 0.5}, 500),
$("#button1").animate({opacity: 1}, 500);
});
});
</script>
So i gave up on that and tried mouseenter/mouseleave combo:
<script>
$(function() {
$("#button1").mouseenter(function() {
$("#button1").animate({opacity: 0.5}, 500);
});
("#button1").mouseleave(function() {
$("#button1").animate({opacity: 1}, 500);
});
});
</script>
It just sticks on the mouseenter animation. So i tried the css method:
<style>
a:hover {
opacity: 0.5;
}
</style>
<div>
<a id="button1" ><img src="Assets/button.png"></a>
</div>
Doesnt do jack. :shrug:

Answer 1

Try passing in the hover handlers in separate functions, like this:
$(function() {
$("#button1").hover(function() {
$("#button1").animate({
opacity: 0.5
}, 500);
}, function() {
$("#button1").animate({
opacity: 1
}, 500)
});
});​

Answer 2

I don't use jQuery, but the CSS example you've provided works perfectly for me. I just copied code from the example and swapped the image with one of my own.
Consider checking whether your browser (it's version) fully supports opacity. I'm using Firefox 12.0

Answer 3

nm, i give up. The only way ive gotten mouse events to work is by putting it directly within the element (onmouseup: onmousedown: etc...). I did get a:hover to work finally but theres no way to animate it without cutting out ie9 and below, so thats out of the question. At least theres a solution, no thanks to jquery.