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에는 제가 필요한 것과 같은 기능이 있습니다(기본적으로 "오른쪽 slide" 기능과 "왼쪽 slide" 기능이 필요합니다). 하지만 jQuery 1.3: http://interface.eyecon.ro/demos/ifx.html 에서 작동할 수 없습니다.또한 100만 개의 오류를 던지기 전에 슬라이드를 한 번만 할 뿐이기 때문에 데모가 고장 난 것 같습니다.

이 기능은 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);
}

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

언급URL : https://stackoverflow.com/questions/521291/jquery-slide-left-and-show