Jquery ui slide photos - jquery slide

3rd of November 2013 25

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 …
Video Rating: 5 / 5

Filed under § jquery animate — Tagged with , ,

Share it!

Was it good for you to?


Support for the site!

No sponsors at the moment.

25 great comment(s) for this post

  1. snoutp 9:14 pm 3/11 of 2013

    Tip: instead of writing all that code for rounded corners, you can just type “border-radius: –px;”

  2. steve whittington 10:07 pm 3/11 of 2013

    You explained everything really well. Thank you so much!

  3. SeptiMUS EmbeR 10:32 pm 3/11 of 2013

    man you are my hero!

  4. SeptiMUS EmbeR 11:21 pm 3/11 of 2013

    “since.. idk why were doing halloween here” haha

  5. kcarzan9111 12:13 am 4/11 of 2013

    Make link’s for your finished product’s for understanding results…please.

    Thank You.

  6. Stephen Kennedy 1:12 am 4/11 of 2013

    Its ok, I’m finished being dumb now, I altered the jquery on what to slide toggle, your comment was perfectly accurate! thanks again for the help

  7. Stephen Kennedy 1:51 am 4/11 of 2013

    Hi, Thanks for the response, I’m probably just not understanding what you mean, I created some links in one of the boxes, and classed this as content, then hid this with ‘display:none’, and scroll works as before but the content is just hidden within the box.

  8. optikalefx 2:01 am 4/11 of 2013

    you just need to narrow the selector on what to hide. so maybe use .box .content to hide only the content inside the box instead of the whole box itself.

  9. Stephen Kennedy 3:00 am 4/11 of 2013

    I have a quick question, say I wish to keep the .box element visible on hover, what is the best way to achieve that? I’ve been looking at css like .box:hover {display:block} etc. but the jquery seems to overwrite it. Thanks

  10. Stephen Kennedy 3:04 am 4/11 of 2013

    Tremendous tutorial, unlike most online tutorials, simple, easy to understand, well explained and thought out but best of all, very useful, I’ll be applying this to menus for sites and display boxes for information, I used to use Dreamweavers spry for similar effects, but this is far less messy code wise I think.

  11. RexcraftDK 3:20 am 4/11 of 2013

    @optikalefxx How can i do so i shall Click not “Hover” over them?

  12. BerimbauSenzala 4:15 am 4/11 of 2013

    you have alot of videos can you order them in one list or name them lesson 1 and so on so i can start with it like this i always open some and its allways a middle video

  13. 504jonjon 4:38 am 4/11 of 2013

    great tut, you made it so easy

  14. wesmck20 4:46 am 4/11 of 2013

    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?

  15. optikalefx 4:54 am 4/11 of 2013

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

  16. MrMaestro14231 5:47 am 4/11 of 2013

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

  17. Connor Simpson 6:19 am 4/11 of 2013

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

  18. Xyn Pihnar 6:22 am 4/11 of 2013

    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.

  19. calctmnt 6:31 am 4/11 of 2013

    Youre right

  20. calctmnt 7:03 am 4/11 of 2013

    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. :)

  21. D3w10n 7:59 am 4/11 of 2013


  22. BopjoWebDesign 8:24 am 4/11 of 2013

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

    $(‘.header’).click(function () {

  23. BopjoWebDesign 8:34 am 4/11 of 2013

    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.

  24. Andrew Jones 9:04 am 4/11 of 2013

    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. :)

  25. Thealedela 10:01 am 4/11 of 2013

    Nice Tut optikalefxx. WHY? Because it is done at a good flowing pace, and yet informative. Nice narration to. I know all the stuff in this tut, but i wish I had seen it when I was learning. Good effort!!!


Your opinion matters. Add it below.

Tip: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recent comments


Copyright jqueryui.info since 2010. All rights reserved. Design and the Absolute Theme by Tommie Hansen.