Helo everyone

Doh i don`t know how to start...

I would like to make a button(link) which will change on hover(on mouse effect).
I found plenty of stuff on net but I decided to make my own.

Generally i was interested in making button which will fade into another(the same but diffrent color) when hover

first i made css style:

"
.button{
    background:url(pic/button.png) no-repeat;
    background-position:0px 1px;
    display:block;
    float:left;
    height:39px;
    width:209px;
    }
.button:hover{
    background:url(pic/button.png);
    background-position:0px -36px;
    }
"
As you can see both buttons are loaded from same file
Cause of button color diffrence using no effects it is to vulgar in my opinion.

Thats why i want to use jquery in order to smoth hover effect in browser.

Rest of my <php> code looks like:
"
<script type="text/javascript">
$(function() {
        // Page load
        $(".buttonw").css("opacity","1");
        // Mouse over
        $(".buttonw").hover(function () {
            $(this).stop().animate({
                opacity: 1
            }, "slow");
        },
        // Mouse out
        function () {
            $(this).stop().animate({
                opacity: 1
            }, "slow");
        });
    });
</script>
<div class="button">Text here</div>
"
Cause of opacity set to 1 effect is not visible. Propably i am using frong effect but i am not sure.

I think cause of css rule(hover state) my effect is not visible in way it should be.
I was aiming to transform from A to B rather than A to 0 to B or any thing like that.


I am new to jquery so please help me