[JQUERY] jQuery를 슬라이드 왼쪽 쇼

jQuery를 슬라이드 왼쪽 쇼

해결법

1. ---

   1.당신은 당신이 사용할 수있는 자신의 이름을 확장 할 경우이 기능은 UI를 jQuery http://docs.jquery.com/UI/Effects/Slide의 한 부분으로 포함되어 있습니다.

   당신은 당신이 사용할 수있는 자신의 이름을 확장 할 경우이 기능은 UI를 jQuery http://docs.jquery.com/UI/Effects/Slide의 한 부분으로 포함되어 있습니다.

   jQuery.fn.extend({
     slideRightShow: function() {
       return this.each(function() {
           $(this).show('slide', {direction: 'right'}, 1000);
       });
     },
     slideLeftHide: function() {
       return this.each(function() {
         $(this).hide('slide', {direction: 'left'}, 1000);
       });
     },
     slideRightHide: function() {
       return this.each(function() {
         $(this).hide('slide', {direction: 'right'}, 1000);
       });
     },
     slideLeftShow: function() {
       return this.each(function() {
         $(this).show('slide', {direction: 'left'}, 1000);
       });
     }
   });
   

   당신은 다음을 참조해야합니다

   <script src="http://code.jquery.com/jquery-latest.js"></script>
   <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
   <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
   

2. ---

   2.패딩과 마진을 잊지 마세요 ...

   패딩과 마진을 잊지 마세요 ...

   jQuery.fn.slideLeftHide = function(speed, callback) { 
     this.animate({ 
       width: "hide", 
       paddingLeft: "hide", 
       paddingRight: "hide", 
       marginLeft: "hide", 
       marginRight: "hide" 
     }, speed, callback);
   }
   
   jQuery.fn.slideLeftShow = function(speed, callback) { 
     this.animate({ 
       width: "show", 
       paddingLeft: "show", 
       paddingRight: "show", 
       marginLeft: "show", 
       marginRight: "show" 
     }, speed, callback);
   }
   

   속도 / 콜백 인수가 추가로, 그것은 완벽한 드롭 인 교체 slideUp () 및 slideDown ()에 대한입니다.

3. ---

   3.당신은 자신의 스크립트 파일에 다음 줄을 추가하여 jQuery 라이브러리에 새로운 기능을 추가 할 수 있습니다 당신은 쉽게 fadeSlideRight ()와 fadeSlideLeft ()를 사용할 수 있습니다.

   당신은 자신의 스크립트 파일에 다음 줄을 추가하여 jQuery 라이브러리에 새로운 기능을 추가 할 수 있습니다 당신은 쉽게 fadeSlideRight ()와 fadeSlideLeft ()를 사용할 수 있습니다.

   참고 : 750px의 예처럼 같은 애니메이션의 폭을 변경할 수 있습니다.

   $.fn.fadeSlideRight = function(speed,fn) {
       return $(this).animate({
           'opacity' : 1,
           'width' : '750px'
       },speed || 400, function() {
           $.isFunction(fn) && fn.call(this);
       });
   }
   
   $.fn.fadeSlideLeft = function(speed,fn) {
       return $(this).animate({
           'opacity' : 0,
           'width' : '0px'
       },speed || 400,function() {
           $.isFunction(fn) && fn.call(this);
       });
   }
   

4. ---

   4.당신이 속도를 변경하고 싶은 콜백을 포함하는 경우 그리고 간단하게 다음과 같이 추가 :

   당신이 속도를 변경하고 싶은 콜백을 포함하는 경우 그리고 간단하게 다음과 같이 추가 :

           jQuery.fn.extend({
               slideRightShow: function(speed,callback) {
                   return this.each(function() {
                       $(this).show('slide', {direction: 'right'}, speed, callback);
                   });
               },
               slideLeftHide: function(speed,callback) {
                   return this.each(function() {
                       $(this).hide('slide', {direction: 'left'}, speed, callback);
                   });
               },
               slideRightHide: function(speed,callback) {
                   return this.each(function() {  
                       $(this).hide('slide', {direction: 'right'}, speed, callback);
                   });
               },
               slideLeftShow: function(speed,callback) {
                   return this.each(function() {
                       $(this).show('slide', {direction: 'left'}, speed, callback);
                   });
               }
           });
   

from https://stackoverflow.com/questions/521291/jquery-slide-left-and-show by cc-by-sa and MIT license