0

私は画像のグリッドを持っており、1つの画像にカーソルを合わせてズームインする方法を見つけようとしていますが、実際の可視領域で画像がズームするのと同じであるため、ズームインが完了するとアニメーションがトリガーされます残った画像。

これは現在私が試みていることです。限られた表示領域内に画像が収まるように 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 に答える