Question

I have a simple button with an img. A double img: blue arrow at top, green arrow in bottom (hight 44px) . I cannot put the img in the background for different reasons. So I tried to put the img in the html and move it with jQuery. But it doesn’t move. Anyone can help?
http://jsfiddle.net/uPd86/

HTML:

<div id="button">
  <div id="text">boto</div>
  <div id="arrow"><img src="http://www.mig-marketing.com/img/arrowDouble.png"></div>
</div>​

CSS:

#button{
    position:absolute;
    top:20px;
    left:20px;
    width:45px;
    height: 15px;
    line-height: 15px;
    overflow:hidden;
}    

#text{
    position:absolute; 
}

#arrow{
    position:absolute;
    right:0px;
    width:15px;
    height:15px;
}​

JAVASCRIPT:

$(function(){

    $("#button").hover(function() {
        $("#button #arrow").animate({top: "-22"}, 1200);
    });

})

​

Answer 1

Are you trying to do this:

http://jsfiddle.net/rathoreahsan/uPd86/6/

jQuery

$(function(){

    $("#button").hover(function() {
        $("#button #arrow").animate({top: "-17px"}, 1200);
    }, function(){
        $("#button #arrow").animate({top: "0px"}, 1200);
    });

})