jQuery向左滑动并显示
我扩展了名为slideRightShow()和slideLeftHide()的jQuery效果，添加了两个类似于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。此外，他们的演示似乎已经坏了，因为在抛出一百万个错误之前，它只会做一次幻灯片。
回答 4
Stack Overflow用户
发布于 2009-02-06 18:10:43
这个特性包含在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>Stack Overflow用户
发布于 2009-09-29 13:50:03
别忘了填充和边距...
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()。
Stack Overflow用户
发布于 2012-07-10 15:27:12
通过在自己脚本文件中添加这些行，可以将新函数添加到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);
});
}https://stackoverflow.com/questions/521291
复制相似问题