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 Interface 有一些类似我需要的东西(我基本上需要它们的“向右滑入”和“向左滑出”功能) ，但是我无法让它与 jQuery 1.3: http://interface.eyecon.ro/demos/ifx.html一起工作。此外，他们的演示似乎打破了，以及它只会做一个幻灯片之前抛出一百万个错误。

388740 次浏览
小开
最佳答案

This feature is included as part of jquery ui http://docs.jquery.com/UI/Effects/Slide if you want to extend it with your own names you can use this.

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

you will need the following references

<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>
小开

Don't forget the padding and margins...

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

With the speed/callback arguments added, it's a complete drop-in replacement for slideUp() and slideDown().

小开

You can add new function to your jQuery library by adding these line on your own script file and you can easily use fadeSlideRight() and fadeSlideLeft().

Note: you can change width of animation as you like instance of 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);
});
}
小开

And if you want to vary the speed and include callbacks simply add them like 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);
});
}
});

提交答案