jQuery 슬라이드 왼쪽 및 표시

jQuery 슬라이드 왼쪽 및 표시

---

나는 연장 jQuery이라는 효과 slideRightShow()와 slideLeftHide()유사하게 그 일을 몇 기능을 slideUp()하고 slideDown()아래와 같이. 그러나 또한 구현 slideLeftShow()하고 싶습니다 slideRightHide().

나는 (내가 또 다른 대형 세트 추가하지 싶은 것은 이런 종류의를 제공 상당한 라이브러리가 알고있는 javascript파일) 만 캔 사람 중 하나를 구현하는 방법의 간단한 예를 제공 slideLeftShow()또는 slideRightHide()?

jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'show'});
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'hide'});
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      ???
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      ???
    });
  }
});

위의 slideRightShow기능은 왼쪽에서 이미지를 보여주기 시작하고 오른쪽으로 진행합니다. 나는 같은 일을 할 수있는 방법을 찾고 있지만 오른쪽에서 시작하여 왼쪽으로 진행합니다 . 감사!

편집하다

jQuery Interface에는 필요한 것과 같은 기능이 있지만 (기본적으로 "오른쪽 슬라이드"및 "왼쪽 슬라이드"기능이 필요함) jQuery 1.3에서 작동하지 못했습니다. http://interface.eyecon.ro/demos /ifx.html . 또한 그들의 데모는 실패한 것처럼 보이며 백만 번의 오류가 발생하기 전에 한 번만 슬라이드를 수행합니다.

---

이 기능은 자신의 이름으로 확장하려는 경우 jquery ui 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>

---

패딩과 여백을 잊지 마십시오 ...

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().

---

You can add new function to your jQuery library by adding these line on your own script file and you can easily use fadeSlideRight() and fadeSlideLeft().

Note: you can change width of animation as you like instance of 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);
    });
}

---

And if you want to vary the speed and include callbacks simply add them like this :

        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);
                });
            }
        });

참고URL : https://stackoverflow.com/questions/521291/jquery-slide-left-and-show