왼쪽으로 움직이면 div가 사라진다.

Question

내가 원하는 것은 div를 통해 스왑 할 수 있다는 것이다. 이것은 내 html입니다 :

<article id="realize" class="realizeBox"> 
    <div class="shown"> 
     <div class="heading"> 
      <h2>Realisations: <span>AGFA</span></h2> 
     </div> 
     <div class="centering"> 
      <aside class="left"> 
       <p>Maecenas laoreet est bibendum, dictum mi vel, cursus mi. Curabitur feugiat libero vitae lorem venenatis consequat. Donec luctus nisi cursus miet sapien blandit, quis congue massa tincidunt.</p> 
      </aside> 
      <aside class="right"> 
       <p>Maecenas laoreet est bibendum, dictum mi vel, cursus mi. Curabitur feugiat libero vitae lorem venenatis consequat. Donec luctus nisi cursus miet sapien blandit, quis congue massa tincidunt.</p> 
      </aside> 
      <div class="clear"></div> 
     </div> 
     <div class="button"> 
      <div class="centering"> <a href="#" class="next"></a> <a href="#" class="prv"></a> </div> 
     </div> 
    </div> 
    <div class="notshown"> 
     <div class="heading"> 
      <h2>Realisations: <span>TEST</span></h2> 
     </div> 
     <div class="centering"> 
      <aside class="left"> 
       <p>Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p> 
      </aside> 
      <aside class="right"> 
       <p>Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p> 
      </aside> 
      <div class="clear"></div> 
     </div> 
     <div class="button"> 
      <div class="centering"> <a href="#" class="next"></a> <a href="#" class="prv"></a> </div> 
     </div> 
    </div> 
</article> 

본인은 내 기사에 여러 div가 있습니다. 첫 번째 div가 표시됩니다. 두 번째 (및 나중에 3D, 네 번째, ..) 클래스 notshown에는 display:none;이 있습니다.

<a href="#" class="next"></a> 
<a href="#" class="prv"></a> 

이가 연결된 자바 스크립트는 다음과 같습니다 :

는 또한 각 사업부에 대한 2 개 버튼이

다음 사업부가 있다면 확인을 클릭 다음

$('.next').click(function(e){ 
    e.preventDefault(); 
    if($('.realizeBox .shown').next().length > 0) 
    { 
     $('.realizeBox .shown').removeClass('shown').addClass('notshown').next().addClass('shown').removeClass('notshown'); 
    } 
}); 

$('.prv').click(function(e){ 
    e.preventDefault(); 
    if($('.realizeBox .shown').prev().length > 0) 
    { 
     $('.realizeBox .shown').removeClass('shown').addClass('notshown').prev().addClass('shown').removeClass('notshown'); 
    } 
}); 

. 그래 그때는 현재 DIV에 클래스 notshown을 추가하고 다음 DIV 클래스 shown을 얻고 클래스 notshown이 가을 제거합니다.

이제 div를 보여 주거나 감추고 정말 지루합니다. 다음 및 이전을 클릭하면 div가 오른쪽 및 왼쪽으로 움직이는 효과를 어떻게 만들 수 있습니까?

나는 애니메이션으로 이것을하려고했지만 성공하지 못했습니다. 나는 자바 스크립트에서 정말 나쁘다. 그래서 이것을 어떻게하는지 정말로 모른다. 누군가 나를 도울 수 있을까요?

Answer 1

이것을 달성하려면 CSS 전환을 사용할 수 있습니다.

는

#realizeBox > div{ 
    -webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    transform: translateZ(0); 
    /* trigger GPU rather than CPU for animations just for the lulz */ 

    transition: opacity 200ms linear; 
} 

Answer 2

당신을 추가하여 아주 쉽게 안으로 밖으로 애니메이션을 가질 수 notshown 및 shown 클래스에 대한 CSS를

.shown{ 
    opacity:1; 
} 

.notshown{ 
    opacity:0; 
} 

이다 (당신이를 havent로 추가) 가정 할 수 있습니다 원하는 경우이 대답을 거부 할 수 있지만 처음부터 회전식 메뉴를 만드는 것은 특히 이미이 코드에 대한 많은 솔루션이 있으며 수정할 수있는 경우에는 다소 지루합니다. 다음은 찾고있는 것을 보여주는 몇 가지 예입니다. http://bxslider.com/examples/carousel-demystified

$(document).ready(function(){ 
    $('.slider1').bxSlider({ 
    slideWidth: 200, 
    minSlides: 2, 
    maxSlides: 3, 
    slideMargin: 10 
    }); 
}); 

<div class="slider1"> 
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div> 
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div> 
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div> 
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div> 
</div> 

희망이 있습니다.

Answer 3

CSS 코드는 클래스가에

를 추가 할 때 그것으로 백업됩니다 완료 당신이 사용하는 경우 위치

의 것 후 그래서

@-webkit-keyframes disappear { 
    from{transform: translate(0,0);} 
    to{transform: translate(-100%,0);} 
} 
@keyframes disappear{ 
    from{transform: translate(0,0);} 
    to{transform: translate(-100%,0);} 
}  
.notshown{ 
    animation: disappear 2s; 
    -webkit-animation: disappear 2s; 
} 

이이 사업부에 영향을 미칠 것 할 display:none 당신이 원 영향을 보지 마십시오 (숨김으로 이동합니다)

따라서 CSS에서 display:none을 제거하고 setTimeout을 사용하는 것입니다. 시간과 동일한 지연 시간에 당신이 애니메이션까지 사업부의 숨겨진

이 전체 코드를 마무리 지연 animation와 함께 사용할 notshown에 대한 CSS는

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $(".notshown").css('display','none'); 
     $('.next').click(function(e){ 
      e.preventDefault(); 
      if($('.realizeBox .shown').next().length > 0) 
      { 
       $('.realizeBox .shown').removeClass('shown').addClass('notshown').next().addClass('shown').removeClass('notshown'); 
       setTimeout(function(){ 
        $(".shown").css('display',''); 
        $(".notshown").css('display','none'); 
       },2000); 
      } 
     }); 

     $('.prv').click(function(e){ 
      e.preventDefault(); 
      if($('.realizeBox .shown').prev().length > 0) 
      { 
       $('.realizeBox .shown').removeClass('shown').addClass('notshown').prev().addClass('shown').removeClass('notshown'); 
      } 
     }); 
    }); 
</script> 
<style> 
    @-webkit-keyframes disappear { 
     from{transform: translate(0,0);} 
     to{transform: translate(-100%,0);} 
    } 
    @keyframes disappear{ 
     from{transform: translate(0,0);} 
     to{transform: translate(-100%,0);} 
    } 
    .notshown{ 
     animation: disappear 2s; 
     -webkit-animation: disappear 2s; 
    } 

</style> 
<a href="#" class="next">next</a><br/> 
<a href="#" class="prv">prv</a> 
<article id="realize" class="realizeBox"> 
    <div class="shown"> 
     <div class="heading"> 
      <h2>Realisations: <span>AGFA</span></h2> 
     </div> 
     <div class="centering"> 
      <aside class="left"> 
       <p>Maecenas laoreet est bibendum, dictum mi vel, cursus mi. Curabitur feugiat libero vitae lorem venenatis consequat. Donec luctus nisi cursus miet sapien blandit, quis congue massa tincidunt.</p> 
      </aside> 
      <aside class="right"> 
       <p>Maecenas laoreet est bibendum, dictum mi vel, cursus mi. Curabitur feugiat libero vitae lorem venenatis consequat. Donec luctus nisi cursus miet sapien blandit, quis congue massa tincidunt.</p> 
      </aside> 
      <div class="clear"></div> 
     </div> 
     <div class="button"> 
      <div class="centering"> <a href="#" class="next"></a> <a href="#" class="prv"></a> </div> 
     </div> 
    </div> 
    <div class="notshown"> 
     <div class="heading"> 
      <h2>Realisations: <span>TEST</span></h2> 
     </div> 
     <div class="centering"> 
      <aside class="left"> 
       <p>Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p> 
      </aside> 
      <aside class="right"> 
       <p>Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p> 
      </aside> 
      <div class="clear"></div> 
     </div> 
     <div class="button"> 
      <div class="centering"> <a href="#" class="next"></a> <a href="#" class="prv"></a> </div> 
     </div> 
    </div> 
</article>