Question

我有一个图像网格，我试图找出如何将鼠标悬停在一个图像上，让它放大，但是当图像放大实际可见区域是相同的，所以当它完成放大动画是触发动画留下的图像。

这是我正在尝试的。我想我需要改变我的CSS以使图像保持在一个受限制的可视区域内

我的JS

$('.grid img').on({
mouseenter: function(){
    $(this).animate({width: '406px', height: '253px'}, 800, function(){
        $(this).animate({right: '50px'},1000);
         });
       },
mouseleave: function(){
    $(this).animate({ right: '0px', width: '339px', height: '211px'}, 800);
   }
});

mu css

body{background:url(bg.jpg);}

ul.grid {
 list-style: none;
  top: 0;
  margin: 60px auto 0;
  width: 1200px; 
  }

.grid li span {   
  background:url(mag.png);
  height: 9px;
  width: 9px;   
  top:2px;
  right: 2px;
  position:absolute;   
 }

.grid li a:hover img {
 -webkit-transition: opacity .3s ease-in;
 -moz-transition: opactiy .3s ease-in;
 -ms-transition: opacity .3s ease-in;
 -o-transition: opacity .3s ease-in;
 transition: opacity .3s ease-in;
 opacity: 1;
 }

.grid:hover li {
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opactiy .3s ease-in;
  -ms-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in;
  zoom: 1;
  filter: alpha(opacity=1);
  opacity: 0.3;
 }

.grid li {
 float: left;
 margin: 0px 40px 75px 0px;
 display:inline;
 position:relative;
  }

.grid li img {
  margin: 0;
  width: 339px;
  height: 211px;
  position:relative;
  overflow:hidden;
 }

.grid:hover li:hover {opacity: 1;}
.grid img::selection { background-color: transparent; }

#hidden{
 position:absolute;
 width: 1300px;
 height:670px;
 top:0px;
 z-index:-1;
 }

.title{
 font-size: 100%;
 top: -40px;
 color: white;
 left: 0%;
 position: absolute;    
 z-index: 1;
}

JSFIDDLE

Answer 1

你根本不需要jQuery，就像你对不透明度一样使用CSS3过渡是最容易的。 Updated jsFiddle

以下是相关更新的CSS

.grid li a:hover img {
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity: 1;
  transform: scale(1.15);
  -ms-transform: scale(1.15); /* IE 9 */
  -webkit-transform: scale(1.15); /* Safari and Chrome */
}

.grid:hover li {
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  zoom: 1;
  filter: alpha(opacity=1);
  opacity: 0.3;
}

.grid li {
  float: left;
  margin: 0px 40px 75px 0px;
  display:inline;
  position:relative;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity:1;
}

.grid li img {
  margin: 0;
  width: 339px;
  height: 211px;
  position:relative;
  overflow:hidden;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  transform: scale(1);
  -ms-transform: scale(1); /* IE 9 */
  -webkit-transform: scale(1); /* Safari and Chrome */
}

jquery悬停图像动画图像的大小和泛左

1 个答案: