"밀어 넣기"및 "끌어 오기"효과를 만들려면 어떻게해야합니까?

Question

업데이트 :
이러한 예에서 우리는 velocity.js을 사용하고 있습니다. 누군가가 jquery 만을 사용하여 예제를 삭제하면 괜찮습니다. 그냥 논리를 이해해야하고 적응하려고합니다. 어떻게 든 "이 자세히보기" "는 덜보기", http://codepen.io/anon/pen/xbVpBO

ISSUE

이

나는 butttons을 기원를 해결하고자하는 시도 :

여기에 빠른 봐주십시오 " 따르기"슬라이드 애니메이션.
이 순간에, 그들은 단지 "점프"하고,이 애니메이션은 더 부드럽습니다.
콘텐츠가 올라갈 때 버튼이 올라가고 콘텐츠가 다운되면 콘텐츠도 다운됩니다. :(

사람이 제발 도와 줄래? 내가 완벽한 폼 Velocity.js에 의존하고있어

를,이, 이해할 아마도 그게 내가 잘못을하고있어 이었나있는 동안. :(

하십시오 조언 :

complete: function() { 
        $(btShowMoreEventInfo).hide(); 
        $(btShowLessEventInfo).show(); 
       } 

HTML :

,

<div class="event-wrapper"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. 
</div> 
<a href="#" class="bt-show-hide-event-info"> 
     <p class="bt-show-more-event-info">SHOW MORE <br /><img src="/images/eventos/showMore.png" alt="show more" /></p> 
     <p class="bt-show-less-event-info">SHOW LESS <br /><img src="/images/eventos/showLess.png" alt="show less" /></p> 
</a> 

CSS :

body { 
    text-align: center; 
} 

div { 
    width: 50%; 
    margin: 0 auto; 
} 

.event-wrapper { 
    display: none; 
} 

.bt-show-less-event-info { 
    display: none; 
} 

JS : 나는 그것이 올바른 이해하면이 도움이

jQuery('.bt-show-hide-event-info').on('click', function(evt) { 
    var eventWrapper = $(this).siblings('.event-wrapper').eq(0); 
    var btShowMoreEventInfo = $(this).find('.bt-show-more-event-info'); 
    var btShowLessEventInfo = $(this).find('.bt-show-less-event-info'); 

    if ($(eventWrapper).is(':visible')) { 
     $(eventWrapper).velocity(
      "transition.slideUpOut", 
      { 
       duration: 500, 
       complete: function() { 
        $(btShowLessEventInfo).hide(); 
        $(btShowMoreEventInfo).show(); 
       } 
      } 
     ); 
    } else { 
     $(eventWrapper).velocity(
      "transition.slideDownIn", 
      { 
       duration: 500, 
       complete: function() { 
        $(btShowMoreEventInfo).hide(); 
        $(btShowLessEventInfo).show(); 
       } 
      }); 
    } 

    evt.preventDefault(); 
}); 

Answer 1

희망이 Fiddle

<div class="event-wrapper"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. 
</div> 
<a href="#" id="less" class="clickMe">Show Less... 
</a> 
<a href="#" id="more" style="display: none" class="clickMe">Show More... 
</a> 


$().ready(function(){ 
$(".clickMe").click(function(e) 
    { 
     e.preventDefault(); 
     $(".event-wrapper").slideToggle("fast", function(){ 
      if ($(this).is(":visible")) { 
       $("#less").show(); 
       $("#more").hide(); 
      } 
      else 
      { 
       $("#more").show(); 
       $("#less").hide(); 
      } 
     })     
    }) 
});