jquery slide

This is a quick tutorial of how you can use jquery to make some cool animation effects. It just using the slideToggle and some added CSS3 rounded corners to make it look even better.

Category:

Science & Technology

Tags:

• css3
• css
• jquery
• slide
• animation
• javascript
• html
• scratch
• code
• programming
• toggle
• slidetoggle
• rounded
• corners
• div
• next

[MrMaestro14231]

you should get notepad++ (unless you already have)

[optikalefxx]

@MrMaestro14231 i use textwrangler on the mac. It blows notepad++ out of the water

[pstap92]

Could you please help with this, I was able to change it so that instead of when you hover over it and it slides down, you have to click it. I achieved this by changing .hover() to .click(). However how could I make the header change to a different color when the box is showing, and back to orange when the tab isn't. Please help, I'm new to JQuery.

[optikalefxx]

@pstap92 So what you need to do is in the click, select the tab with jquery and run .css("background-color","blue"­)

and then for making it go back, whenever it slides back up, also have it select the tab and do .css("background-color","orang­e")

If you send me code I can show you with your code.

[pstap92]

@optikalefxx I can make it change color, however I can't get it to change back.

[optikalefxx]

@pstap92 your hover must not be right. make sure you have the right syntax for the hover method.

you can always use mouseover and mouseout as separate functions instead of hover.

[optikalefxx]

@c532869 This makes me smile.

Screw microsoft.

[wesmck20]

I tried putting an image link inside the box, but when I hover over it the image shows up in the div before the box actually slides down. Any suggestions?

[csyicker]

3:26 Wrong..... border-radius:12px; works in all versions of IE.(maybe not all, but you get me).

[xyn333]

@optikalefxx yeah truly, i agree with u fully, i mean dear Gawd,, if u can program jquery why would u use IE8.. or IE in any universe or for any reason even as an end user... most people are finally adapting to firefox atleast and samsung is pushing the google browsing concept... so im sure 2 years from now everything will be a ok for any scripts.. screw IE9 aswell... go chrome or go home.. yay for safari and dnt run with the flocks get firefox... lol.. thanks for the awesome tut.

[calctmnt]

@pbsallad Youre right

[calctmnt]

I don't know if any one has pointed this out, but the CSS for rounding corners in Firefox is wrong. It's supposed to be -moz-border-radius-topleft: -moz-border-radius-topright: and so on and so on. Other than that, great stuff. Thanks for the tut. :)

[D3w10n]

@optikalefxx Amin

[BopjoWebDesign]

@giantsfan245 - using a click handler instead of hover seems more user-friendly to me. Then the code would be shortened to just:

$('.header').click(function () {

$('.box').slideToggle();

});

[BopjoWebDesign]

This looks cool but there's gotta be a better way to do it. You're using slideToggle() twice and it's already a toggle, so using it twice seems redundant. I would think it would be better to have slideDown() for the first hover function argument then slideUp() for the second. It does the same thing but seems more correct in terms of the jquery method used.