0

我有一个图像网格，我正在尝试弄清楚如何将鼠标悬停在一个图像上让它放大，但是随着图像在实际可见区域上的缩放是相同的，所以当它完成放大动画时会触发动画图像离开。

这是目前我正在尝试的。我想我需要更改我的 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);
   }
});

亩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

4

1 回答 1

2

你根本不需要 jQuery，就像你在不透明度上那样使用 CSS3 过渡是最简单的。更新了 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 */
}
于 2013-07-30T18:52:51.423 回答