懸停時圖像放大，但鼠標懸停時垂直圖像不能恢復正常

Question

水平圖像放大並恢復正常，但垂直圖像放大，然後返回水平而不是垂直。我有this fiddle。我不確定，但相信這個問題是在jQuery中。我對jQuery非常陌生，但這似乎是實現我所需要的唯一方法，因爲每個圖像也是一個表單提交按鈕。

#container { 
    display: block; 
    width: 100%; 
    position: relative; 
} 

.img { 
    position: relative; 
    z-index: 0; 
} 

.end { 
    margin-right: 0; 
} 

.clear { 
    clear: both; 
} 

.img a img { 
    position: relative; 
    border: 0 solid #fff; 
} 

.form_align { 
    display: inline; 
    float: left: 
} 

的jQuery：

$(document).ready(function() { 
    var cont_left = $("#container").position().right; 

    if ($('span').hasClass('horz')) { 
     $("input").hover(function() { 
      // hover in 
      $(this).parent().parent().css("z-index", 1); 
      $(this).animate({ 
       height: "405", 
       width: "638", 
       right: "+=50", 
       bottom: "+=150" 
      }, "fast"); 
     }, 
     function() { 
      // hover out 
      $(this).parent().parent().css("z-index", 0); 
      $(this).animate({ 
       height: "250", 
       width: "425", 
       right: "-=50", 
       bottom: "-=150" 
      }, "fast"); 
     }); 


     $(".img").each(function(index) { 
      var right = (index * 160) + cont_left; 
      $(this).css("right", right + "px"); 
     }); 
    } 
    else { 
     $("input").hover(function() { 
      // hover in 
      $(this).parent().parent().css("z-index", 1); 
      $(this).animate({ 
       height: "638", 
       width: "405", 
       right: "+=50", 
       bottom: "+=150" 
      }, "fast"); 
     }, 
     function() { 
      // hover out 
      $(this).parent().parent().css("z-index", 0); 
      $(this).animate({ 
       height: "425", 
       width: "250", 
       right: "-=50", 
       bottom: "-=150" 
      }, "fast"); 
     }); 

     $(".img").each(function(index) { 
      var right = (index * 160) + cont_left; 
      $(this).css("right", right + "px"); 
     }); 
    } 
}); 

HTML：

<div id="container"> 
    <table> 
     <tr> 
      <span class="horz"> 
       <span class="vert">  
        <td> 
         <form class="form_align" method ="post" action="#"> 
          <a href=""><input type="image" src="http://starcuts10.com/images/blue_box.png" class="img"></a> 
          <input type="hidden" name="img" value="http://starcuts10.com/images/blue_box.png"> 
          <input type="hidden" name="poem" value=""> 
         </form> 
        </td> 
       </span> 
       <span class="vert">  
       <td> 
        <form class="form_align" method ="post" action="#"> 
         <a href=""><input type="image" src="http://starcuts10.com/images/red_box.png" class="img"></a> 
         <input type="hidden" name="img" value="http://starcuts10.com/images/red_box.png"> 
         <input type="hidden" name="poem" value=""> 
        </form> 
       </td> 
      </span> 
     </tr> 
    </table><br><br><br> 
</div> 

Answer 1

有什麼不對的，你的jQuery這可以在www.starcuts10.com/poems

CSS可以看出邏輯。

你不需要if ("span.horz") { .. } else { .. }

你需要做的是有兩個懸停效果：$(".horz input")和$(".vert input")。

此外，該html是錯誤的。跨度應該是陣

這是工作提琴內：http://jsfiddle.net/RwJhn/1/