jquery - 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

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

Answer 2

您是否有理由不使用纯 CSS？

jsFiddle

.sizeMe {
    width:300px;
    height:300px;
    background-color:#F00;
    opacity:0.3;
    /* use 'opacity 1s ease' for just opacity */
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    transition:all 1s ease;
}
.sizeMe:hover {
    height:400px;
    opacity:1;
}

Answer 3

试试这个jquery

$("#div1").hover(function () {
                $("#div1").addClass("divclass");
            }, function () {
                $("#div1").removeClass("divclass");
            });

html

           <div id="div1" >
            HTML borders are best created with CSS.
</div>

风格

<style>
.divclass{width:200px;height:100px;border:1px solid blue;}
</style>

Answer 4

使用 CSS

add $(this).addClass('resize');

.resize:hover {
    width:Xpx;
    height:Ypx
}