jQuery控制的不同方向的滑动(向左、向右滑动等)，jquery滑动

jQuery控制的不同方向的滑动(向左、向右滑动等)，jquery滑动

引入jquery.js，复制以下代码，即可运行。

<style type="text/css"> 
.slide { 
position: relative; 
height: 200; 
lightyellow; 
} 

.slide .inner { 
position: absolute; 
left: 0; 
bottom: 0; 
height: 100; 
lightblue; 
width: 100% 
} 
</style>

1、slidetoggle() 交替slidedown(),slideup()

Html代码

<div id="slidebottom" class="slide"> 
<button> 
slide it 
</button> 
<div class="inner"> 
Slide from bottom 
</div> 
</div>

Js代码

$('#slidebottom button').click(function() { 
$(this).next().slideToggle(); 
});

2、左侧横向交替滑动 Animate Left

Html代码

<div id="slidewidth" class="slide"> 
<button> 
slide it 
</button> 
<div class="inner"> 
Slide from bottom 
</div> 
</div>

Js代码

$("#slidewidth button").click(function(){ 
$(this).next().animate({width: 'toggle'}); 
}); 

3、左侧横向交替滑动 Animate Left Margin （非隐藏）

Html代码

<div id="slideleft" class="slide" style="width: 50%;float: right"> 
<button> 
slide it 
</button> 
<div class="inner"> 
Slide from bottom 
</div> 
</div>

Js代码

$("#slideleft button").click(function(){ 
var $lefty = $(this).next(); 
$lefty.animate({ 
left:parseInt($lefty.css('left'),10)==0 ? -$lefty.outerWidth() : 0 
}); 
});

4、右侧横向滑动Slide to right

Html代码

<div id="slidemarginleft" class="slide" style="width: 60%;float: left"> 
<button> 
slide it 
</button> 
<div class="inner"> 
Slide from bottom 
</div> 
</div>

Js代码

$("#slidemarginleft button").click(function(){ 
var $marginlefty = $(this).next(); 
$marginlefty.animate({ 
marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0 ? $marginlefty.outerWidth() : 0 
}); 
});

1、怎么才能使DIV元素向右滑动？
　 可以使用JQuery中的animate（）函数来实现，jQuery animate() 方法用于创建自定义动画。语法：$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。

2、jquery让一个DIV元素淡出的语句怎么写？
如上你所写的是正确的不过去快速淡出参数应该是fast

提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！即要设置那个移动的DIV的position属性。

jquery让一个DIV元素向右滑动并快速淡出的代码：
<script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}).fadeOut("fast"); });});</script>参考资料：www.w3school.com.cn/jquery/jquery_animate.asp
希望对你有所了帮助！

 

<script>
$(document).ready(function(){
$("#hide").click(function(){
if($("#left").css('width') == '200px'){
$("#left").animate({width:0},"slow");
$("#hide").val('显示');
}else{
$("#left").animate({width:200},"slow");
$("#hide").val('隐藏');
}

});
});
</script>

<div id="left" style="width:200px; background-color:#009900; float:left;"> </div>
<div id="right" style="width:400px; background-color: #FF0000; float:left;"> </div>
<div style="float:left">
<input id="hide" type="button" value="隐藏" />
</div>