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
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.
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.
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.
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).
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.
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.
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.
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.
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.
Use slidedown()
:
$("test").slideDown("slow");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With