Home→Blogs→

Display any content here, from text, images, to rich HTML. Use the close link to dismiss the box. Click the close box to dismiss it.

Hide Box

Sliding Elements-Animation Effects with jQuery

Posted By admin on Jun 16, 2012 179 Views

Latest Hinduism news

Sliding Elements with jQuery
These are another set of effects that hide or show elements-slideDown() and slideUp(), This works in a similar manner to the hide() and show() effects, except that the Elements appear to slide down from their tops when being shown and slide up when being hidden. Similar to hide() and show(), the slide effects have a command that will toggle the effect between hidden and shown:

Both the sliding down and sliding up effects are more impressive when you use them with images or blocks with a background color, so the examples in this chapter use <div> blocks with background colors and images to demonstrate the effects.

Sliding down
To make a page element appear to slide down, you first need to hide the element. To hide an element, you set its style attribute to display=none.
To make an element appear on a page using the sliding down effect, follow these steps:
1. Create a Web page containing the following code:
<html>
<head>
    <title>My Test Page</title>
    <script src="jquery-1.6.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function ()  {
            $(':submit').click(function ()  {
                $('div').slideDown();
            });
        });
    </script>
</head>
<body>
    <div style="display: none">
        <img src="kis.jpg" />
    </div>
    <br />
    <input value="Slide Down" type="submit">
</body>
</html>
This code contains a hidden <div> element with an image and a button on click of which hidden image would be shown
.
2. Save the file, and then view it in your browser.

Note that the div is hidden and we can see only button

4. Click the button to see the image inside div with slide down effect as shown below

The slideDown effect makes the image in the hidden <div> element appear from the top down. Now you may want this <div> element to disappear from the bottom to up. This is where slideup functions comes into help.

Sliding up
The slide up effect hides an element by making it slide up

5. Add the following html code and javascript function for slideup function

<input value="Slide Up" type="button">
  $(':button').click(function ()  {
                $('div').slideUp();
            });
When the button is clicked, everything in the <div> disappears using the slide Up effect.

6. Save the changes view it in your browser and Click the button to view slideup effect.
The slideUp effect makes the image in the <div> element slide up and then disappear from view

Changing the slide speed
You can control the speed of the slide up or slide down effect with the speed setting. jQuery has three predefined speeds: slow, medium, and fast. You can also use a number that represents the number of milliseconds during which you want the animation to occur.
$('div').slideUp();   can be changed to
$('div').slideUp('slow');
or
$('div').slideUp(1000);


Sliding with a toggle effect
The slide up and slide down effects work together to hide and show elements. You can use the slide toggle effect to allow a visitor to toggle between an event sliding up and sliding down. To use the slide toggle effect, follow these steps:

  7. Add the following html code and javascript function for slideup function
    <input id="slidetoggle" value="Slide Toggle" type="button">

         $('#slidetoggle').click(function ()  {
                $('div').slideToggle(1000);
            });
When the button is clicked, toggle all <div> elements to slide up if they are shown and slide down if they are hidden
.
8. Save the changes, and then view it in your browse by clicking the button.

Above screenshot show the toggling effect. Since the toggling effect was going on, only half of the image is shown here

Sliding with a callbackfunction
The slide up, slide down, and slide toggle effects allow you to use a callback function, which is code that executes after the effect is finished. Here’s an example of code using a callback function that opens an alert box after an element is toggled:

9. Modify the slidetoggle function to add a callback function
$('#slidetoggle').click(function ()  {
                $('div').slideToggle(1000, function ()  {alert('toggle done');});
            });
This callback function will just show an alert to the user informing him the toggle action has finished executing.

10. Save the changes and then view it in your browser. Click the button.

The <div> element now slides up or down each time you click the button. Then the callback function opens the alert box, indicating that the effect has finished,

Function	Parameter	Return Value	Description
slideDown(speed,callback)	speed (Number\|String) Optionally specifies the duration of the effect as a number of milliseconds or as one of the predefined strings: slow, normal, or fast. If omitted, no animation takes place, and the elements are immediately removed callback (Function) An optional function invoked when the animation completes. No parameters are passed to this function,	wrapped set	Causes any matched elements that are hidden to be shown by gradually increasing their vertical size. Any elements that aren’t hidden aren’t affected. If a speed parameter is provided, the elements are shown over a period of time by adjusting their size.
slideUp(speed,callback)	Same as above	wrapped set	Causes any matched elements that aren’t hidden to be removed from the display by gradually decreasing their vertical size. If a speed parameter is provided, the elements are shown over a specified duration by Adjusting their size An optional callback can be specified that’s invoked when the animation is complete.
slideToggle(speed,callback)	Same as above	Wrapped set.	Performs slideDown() on any hidden wrapped elements and slideUp() on any non-hidden wrapped elements

here

PDF files are not generated for latest articles.

Tags: Sliding,Animation,Effects,Images,Callback,Toggle

Share this to your friends. One of your friend is waiting for your share.

All content of this website(Except Blogs) is handled by an automated process and is subjected to errors.