jQuery滑左边，并显示

Question

我延长的 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接口已经喜欢的东西我需要(基本上是我需要他们的"滑动的权利"和"滑出左"的功能)，但是我不能得到这工作有文1.3: http://interface.eyecon.ro/demos/ifx.html .此外，他们的演示似乎破碎以及它只会做一个滑动前一次投掷一百万的错误。

Answer 1

此特征被包括作为jQuery的用户界面的一部分 http://docs.jquery.com/UI /效果/幻灯片，如果你想将它用自己的名字扩展您可以使用此功能。

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>

Answer 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()。

Answer 3

您可以通过添加你自己的脚本文件，这些行添加新的功能，以您的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);
    });
}

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