jQuery .slideUp() 애니메이션을 건너 뜁니다.

사용자가 나란히 업로드 한 이미지의 미리보기 이미지를 보여주는 응용 프로그램에서 작업하고 있습니다. 나는 풀 사이즈의 이미지와 그에 관한 정보를 보여주고 싶다.jQuery .slideUp() 애니메이션을 건너 뜁니다.

내 해결책은 전체 크기 이미지를 보여주는 페이지를 표시하기 위해 이미지를 클릭 할 때 슬라이드를 위로 올리는 것입니다 (아마도 iframe의 도움을 통해, 아직 확실하지 않음).

나는 첫 번째 단계, 즉 #wrapper 위로 밀어 내려고 노력 중입니다. 아래 코드는 작동하지만 슬라이딩 애니메이션이 표시되지 않습니다. #wrapper이 사라집니다. 이미지에서 클래스 .image을 제거하고 라인 <p class="images">Test</p>을 추가하고 클릭하면 슬라이딩이 작동하지만 이미지가 잘립니다.

그래서 여기에서 문제가 될 수 있습니까? 같은 주제에 대해 몇 가지 질문이 있지만 모두 테이블 사용에 관한 내용입니다.

HTML :

<section id="wrapper"> 
    <div id="blogs"> 
     <div class="blog"> 
     <div class="post"> 
      <img class="images" src="images/image1.png" /> 
      </div> 
     </div> 
     <div class="blog"> 
     <div class="post"> 
      <img class="images" src="images/image2.png" /> 
      </div> 
     </div> 
     <div class="blog"> 
     <div class="post"> 
      <img class="images" src="images/image2.png" /> 
      </div> 
     </div> 
    </div> 
</section>

jQuery를 :

$('.images').click(function(){ 
    $('#wrapper').slideUp('slow', function() { 
    }); 
});

CSS : 나를 위해

#wrapper { 
    background: yellow; 
    margin: 0px auto; 
    width: 100%; 
    height: 1000px; 
    position: relative; 
    top: -20px; 
    left: 20px; 
    text-align: left; 
    margin: 0px auto; 
    padding: 10px; 
} 

.post { 
    background: white; 
    width: 200px; 
    height: 220px; 
    margin: 0px auto; 
    float: left; 
    margin-right: 30px; 
    margin-bottom: 30px; 
    position: relative; 
    padding: 5px; 
    -moz-box-shadow: 0 0 4px 1px #777; 
    -webkit-box-shadow: 0 0 4px 1px#777; 
    box-shadow: 0 0 4px 1px #777; 
} 

.images { 
    margin-left: 5px; 
    margin-top: 5px; 
    width: 188px; 
    height: 170px; 
    border: 1px solid #aaa; 
    border-radius: 2px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
} 

.blogs { 
    height: 400px; 
}

출처

2012-05-13 holyredbeard

을 나는 애니메이션을 참조하십시오 http://jsfiddle.net/YDeuR/ –

를 이미지가 작동하지 않습니다 때문입니다 경우 모르겠어요. 만약 이미지의 소스를 기존 이미지가 아닌 기존 이미지로 변경하면 나에게도 효과가 있지만, 이미지가 디플레이션되는 한 나는 작동하지 않는다는 것입니다. 아주 이상한! – holyredbeard

그렇다면 작동하지 않는 예제에 대한 링크를 게시 할 수 있습니까? 존재하는 이미지로도 작동하기 때문에 http://jsfiddle.net/YDeuR/2/. 또한 어떤 브라우저를 사용하고 있습니까? – tw16

의 작업 좋은 (크롬). 그러나이 시도 :

<section id="wrapper"> 
    <div id="blogs"> 
     <div class="blog"> 
      <div class="post"> 
       <span class="images"> 
        <img src="images/image2.png" alt="" > 
       </span> 
      </div> 
     </div> 
    </div> 
</section>

출처

2012-05-13 15:05:27

jQuery .slideUp() 애니메이션을 건너 뜁니다.

답변

관련 문제