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

Posted 2020-10-21 小混蛋&闯江湖

引入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

});

});