jQuery的向左滑动并显示

107

我延长了jQuery效应称为slideRightShow()和slideLeftHide()有如下看出，类似的工作slideUp()和slideDown()一对夫妇的功能。但是，我也想实施slideLeftShow()和slideRightHide()。jQuery的向左滑动并显示

我知道有提供这种类型的事情大量的库（我想避免添加另一大集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。此外，他们的演示似乎也被打破，并且在抛出一百万个错误之前它只会做一次幻灯片。

来源

2009-02-06 Wickethewok

我更新了我的职位，我希望这有助于 – bendewey 2009-02-06 22:48:04

相关：http://stackoverflow.com/questions/596608/slide-right-to-left – 2014-02-24 15:04:19

184

如果您想用自己的名字扩展它，可以使用此功能作为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-06 18:10:43 bendewey

嗨！我正在寻找你在那里实施的反面。基本上，当我使用我上面显示的元素时，左边的部分先出现并向右进展。我试图让它从右侧开始并向左侧前进。 – Wickethewok 2009-02-06 18:30:03

它的作品，如果你漂浮的权利。除此以外。您可能需要为左侧的属性注册并在缩小元素时移动元素。 – bendewey 2009-02-06 18:56:29

将元素更改为浮动“右”并未为我反转幻灯片。我在上面澄清，如果这有帮助。 – Wickethewok 2009-02-06 21:14:54

不要忘了填充和利润...

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

来源

2009-09-29 13:50:03 vdboor

通过将这些行添加到您自己的脚本文件中，您可以将新功能添加到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-10 07:27:12 thebhatta

如果你想改变速度和包括回调只需添加它们是这样的：

 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-31 00:18:45

jQuery的向左滑动并显示

回答

相关问题