Question

I have a list element like below, I’m trying to just target the image element with jQuery. What is happening is it moves both the span element and the img up by 15 pixels instead of just the image.

However if I move the span element before the img in the HTML it will target the image element correctly. Why is this happening?

<ul class="mainnav">
    <li>
        <a href="#">
            <div class="circles"><img src="/bootstrap_a/img/web_icon/blog_i.png"></div>
            <span>Blog</span>
        </a>                        
    </li>
<ul>

$(".mainnav li a").hover(
    function () {
        $(this).find('img').stop().animate({  marginTop: "-15px" }, 250); 
    }, 
    function () {
        $(this).find('img').stop().animate({ marginTop: "0px" }, 250); 
    }
);

Answer 1

Without changing much of anything, here is a relatively dirty fix for that.

http://jsfiddle.net/rDQkS/

Bottom margin is animated the same amount to push the span away, making it look like only the image is moving.

$(".mainnav li a").hover(
  function () {
    $(this).find('img').stop().animate({  marginTop: "-15px", marginBottom: "15px" }, 250); 
  }, 
  function () {
    $(this).find('img').stop().animate({ marginTop: "0px", marginBottom: "0px" }, 250); 
  }
);​