jquery-controlled sliding in different directions (swipe left, right, etc.)

Introduce Jquery.js and copy the following code to run.

<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 () alternating slidedown (), slideup () HTML code < div id = "slidebottom" class = "slide" > < button > slide it </ button > < div class = "inner" > Slide from bottom </ div > </ div >JS Code $( ‘#slidebottom button‘ ).click( function () { $( this ).next().slideToggle(); });2. Left lateral alternating Animate lefthtml code < div id = "slidewidth" class = "slide" > < button > slide it </ button > < div class = "inner" > Slide from bottom </ div > </ div >JS Code $( "#slidewidth button" ).click( function (){ $( this ).next().animate({width: ‘toggle‘ }); });3. The left side alternately slide the Animate Margin (non-hidden) HTML code < div id = "slideleft" class = "slide" style = "width: 50%;float: right" > < button > slide it </ button > < div class = "inner" > Slide from bottom </ div > </ div >JS Code $( "#slideleft button" ).click( function (){ var $lefty = $( this ).next(); $lefty.animate({ left:parseInt($lefty.css( ‘left‘ ),10)==0 ? -$lefty.outerWidth() : 0 }); });4. Right lateral slide slide to righthtml code < div id = "slidemarginleft" class = "slide" style = "width: 60%;float: left" > < button > slide it </ button > < div class = "inner" > Slide from bottom </ div > </ div >JS Code $( "#slidemarginleft button" ).click( function (){ var $marginlefty = $( this ).next(); $marginlefty.animate({ marginLeft:parseInt($marginlefty.css( ‘marginLeft‘ ),10)==0 ? $marginlefty.outerWidth() : 0 }); });

jquery-controlled sliding in different directions (swipe left, right, etc.)