[jquery] jQuery 슬라이드 왼쪽 및 표시

Program / 글쓴이

나는 연장 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 인터페이스에는 내가 필요로하는 것과 같은 것이 있지만 (기본적으로 “오른쪽으로 슬라이드”및 “왼쪽으로 슬라이드”기능이 필요합니다) 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().

답변

사용자 고유의 스크립트 파일에이 행을 추가하여 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);
    });
}

답변

속도를 변경하고 콜백을 포함하려면 다음과 같이 추가하면됩니다.

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

답변