jquery - jQuery在悬停时增加div大小？

如何在悬停时增加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的对齐方式吗？

最佳答案

使用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>