Slide effect using Jquery UI

Syntax of Slide effect using Jquery UI.

$( "#element" ).effect( "slide",{direction:value,distance:value},speed,function(){

Here we have given "slide " as effect. All other parameters are optional

distance: (Optional)
Distance in pixel the element has to travel , default value is 20
direction (Optional)
It can take these values

callback function: (Optional)
We can use a callback function to execute once the slide effect is over
speed (Optional)
It can take these values

time in millseconds
Let us start with default slide effect, d1 is id of our div layer.
$( "#d1" ).effect( "slide" );
Usually it is connected to Click event of a button, here button id is b1
$( "#d1" ).effect( "slide" );
We can add optional parameter direction to manage up , down , left or right movment effect.
$( "#d1" ).effect( "slide",{direction:'up'});
Similarly we can add distance in pixels
$( "#d1" ).effect( "slide",{distance:60});
WE can add callback function to this, the function will display an alert window with message once the slide effect is over.

Here is the code with all optional values
$( "#d1" ).effect( "slide",{distance:200},5000,function(){
alert('This alert is created by using callback function once the effect is over');
} );


* indicates required
Subscribe to plus2net

    Post your comments , suggestion , error , requirements etc here .

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer