两个完整的jquery slide多方面滑动效果实例
实例1，需要引用jquery-ui.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
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);
});
}
});
$(function(){
$("body").on("click","a#show",function(){
$("#test").slideRightShow();
});
$("body").on("click","a#hide",function(){
$("#test").slideRightHide();
});
});
</script>
</head>
<body>
<div >asdfasdf</div>
<br />
<a href="javascript:void(0)" >显示</a>
<a href="javascript:void(0)" >隐藏</a>
</body>
</html>实例二：
<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
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 );
};
</script>
<script type="text/javascript">
$(function() {
$(".title_bar").slideLeftHide(4000);
$(".title_bar").slideLeftShow(4000);
});
</script>
</head>
<body>
<div class="title_bar">
asdfasfasdfas
</div>
</body>
</html>