jquery - hover（）が意図したとおりに機能しない

Question

以下のようなリスト要素があります。jQueryで画像要素をターゲットにしようとしています。何が起こっているのかというと、画像だけでなく、span要素とimg上に15ピクセルの両方が移動します。

ただし、HTMLspanの前に要素を移動imgすると、画像要素が正しくターゲットになります。なぜこうなった？

<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

何も変更せずに、これは比較的汚い修正です。

http://jsfiddle.net/rDQkS/

下の余白は、スパンを押しのけるために同じ量だけアニメーション化され、画像だけが動いているように見えます。

$(".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); 
  }
);​

Answer 2

まず、<img>タグを閉じていないので、必ず閉じてください。

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