Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change the jquery show()/hide() animation?

By default if you specify a speed jquery adds a weird looking animation where it expands from the left end corner. I want it to just slide down. Is there a way to do that without importing something else like jquery UI ?

I'm looking something in the lines of :

$("test").show('slow', {animation:'slide'}) 

If there's no way, then what would be the lightest solution to do this?

Thanks

like image 908
marcgg Avatar asked Sep 15 '09 16:09

marcgg


People also ask

How do I toggle Show hide in jQuery?

The toggle() method toggles between hide() and show() for the selected elements. This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.

What does jQuery hide () do?

The hide() method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To show hidden elements, look at the show() method.

What does show () do in jQuery?

The show() Method in jQuery is used to display the hidden and selected elements. Note: This method display the hidden elements which are using CSS display: none property. The elements are not visible whose visibility is hidden.

Is show or hide in jQuery?

The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is a function to be executed after the hide() or show() method completes (you will learn more about callback functions in a later chapter).

How do I Turn Off jQuery hide animation?

All jQuery effects, including .hide (), can be turned off globally by setting jQuery.fx.off = true, which effectively sets the duration to 0. For more information, see jQuery.fx.off . Hides all paragraphs then the link on click. Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.

How to show or hide content using animation in rem jQuery?

Rem jQuery can also show or hide content by means of animation effects. Rem You can tell .show () and .hide () to use animation in a couple of ways.

How to use jQuery show/hide effect on HTML elements?

With jQuery, you can use jQuery show/hide effect an HTML elements using the functions show () and hide (). The hide () can be used to hide some HTML element when some event occurs while show () can be used to display the hidden element.

What is the difference between hide () and show () in jQuery?

The show () reverse the effect of hide () and display the element hidden by hide (). The hide () applies the display:none CSS to the HTML element when use the jquery function while show () applies the display:block CSS. Check the example given below to find out the changes effects.


2 Answers

There are the slideDown, slideUp, and slideToggle functions native to jquery 1.3+, and they work quite nicely...

https://api.jquery.com/category/effects/

You can use slideDown just like this:

$("test").slideDown("slow"); 

And if you want to combine effects and really go nuts I'd take a look at the animate function which allows you to specify a number of CSS properties to shape tween or morph into. Pretty fancy stuff, that.

like image 128
Steve Wortham Avatar answered Sep 21 '22 02:09

Steve Wortham


Use slidedown():

$("test").slideDown("slow"); 
like image 32
beggs Avatar answered Sep 23 '22 02:09

beggs