Jquery在悬停时增加div大小？

Question

如何在悬停时增加div大小？每个div都有相同的类名,它是动态创建的.我试过这段代码:

<script type="text/javascript">
$('.resultitem').bind('mouseover', function() {
    $(this).addClass('hovers');
    $('.resultitem').not('.hover').css({ opacity: 0.3 });
});
$('.resultitem').bind('mouseout', function() {
    $('.resultitem').removeClass('hovers').fadeTo('normal',1);
});
</script>

<style type="text/css">
.hovers {
    width:300px;
    height:400px;
}
img.hovers {
    width:300px;
    height:300px;
}
</style> 

它改变了其他div的对齐方式？

Answer 1

使用CSS3 transform: scale(1.1)

.resultitem{
  width:150px;
  height:150px;
  background:#48e;
  -webkit-transition: 0.5s;
          transition: 0.5s;
}

.resultitem:hover{
  background:#59f;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

<div id="parent">
  <img class="resultitem" />
  <img class="resultitem" />
  <img class="resultitem" />
  <img class="resultitem" />
  <img class="resultitem" />
  <img class="resultitem" />
</div>