111

我扩展了jQuery调用的效果slideRightShow()，并slideLeftHide()使用了几个功能与下面类似的功能，slideUp()如下slideDown()所示。但是，我也想实现slideLeftShow()and 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。此外，他们的演示似乎坏了，而且它只会在抛出一百万个错误之前做一次幻灯片。

4

4 回答 4

185

此功能包含在 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>
于 2009-02-06T18:10:43.010 回答
34

不要忘记填充和边距......

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()and slideDown()。

于 2009-09-29T13:50:03.047 回答
10

您可以通过在您自己的脚本文件中添加这些行来将新功能添加到您的 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);
    });
}
于 2012-07-10T07:27:12.123 回答
5

如果你想改变速度并包含回调，只需像这样添加它们：

        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);
                });
            }
        });
于 2013-01-31T00:18:45.430 回答