2

画像のグリッドがあり、画像をクリックすると、クリックした画像以外のすべての画像が下に移動します。私の問題は、これを行うと、残りの画像が左上に引っ張られることです。画像を削除しているため、残りの画像は唯一のものと見なされないため、グリッドの位置1に配置されているためだと思います

$(document).ready(function() {

  $('#grid li').click(function() {
  $(this).siblings().animate({opacity: 0, top:'15px'},1000);
  $(this).siblings().fadeOut(function() {
     });
  });   

$('#hidden').click(function() {
  $('#grid li img').animate({width:'339px',height:'211px'});
  $('#grid li').siblings().fadeIn();
  $('#grid li').siblings().animate({opacity: 1, top:'0px'},1000);
       });
   });

HTML

<div class="portfolio">
  <ul id="grid">   
     <li><a href="#"><img src="1.jpg"><span>some text></a></li>
     <li><a href="#"><img src="2.jpg"><span>some text></a></li>
     <li><a href="#"><img src="3.jpg"><span>some text></a></li>
     <li><a href="#"><img src="4.jpg"><span>some text></a></li>
     <li><a href="#"><img src="5.jpg"><span>some text></a></li>
     <li><a href="#"><img src="6.jpg"><span>some text></a></li>
     <li><a href="#"><img src="7.jpg"><span>some text></a></li>
     <li><a href="#"><img src="8.jpg"><span>some text></a></li>
     <li><a href="#"><img src="9.jpg"><span>some text></a></li>
      </ul></div>
 <div id="hidden">

CSS

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

 #grid li span {
  color: white;
  display:block;
  bottom:250px;
  position:relative;
  width:180px;
  }

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

JSFIDDLE

4

3 に答える 3

3

最も簡単な方法は、fadeOut() を使用しないことです。これは、display:none を設定するためです。これが、画像が移動する理由です。

$('#grid li').click(function() {
  // $(this).siblings().css("position","relative");
  $(this).siblings().animate({opacity: 0, top:'15px'},1000, function() {
    // Animation complete.
      $('#grid li img').animate({width:'339px',height:'211px'});
  });
 });

フィドル

于 2013-07-23T22:44:59.277 に答える
1

Jquery animate を使用して、不透明度を 0 にフェードするだけです。フェードアウトが実際に行うことは、不透明度を 0 にフェードすることです。その後、不透明度が 0 になると、オブジェクトが消えるように「display: none」を設定します。あなたは単に前者だけをしたいだけです！$('myobjects').animate({opacity: 0}, slow); のようなもの 私の構文が正しいことを願っています。乾杯！

于 2013-07-23T22:39:43.007 に答える