DevSnippets
Subscribe by RSS
  • DevSnippets FEED
  • |
  • User Link Feed
  • |
  • Code Snippets
  • Home
  • Contact Us
  • About DevSnippets
  • Archives
  • Subscribe
  • Follow Us
  • CSS
  • jQuery
  • Menus
  • Layouts
  • WordPress
  • javascript
  • IE Hacks
  • Mootools
  • Prototype
  • WordPress Hacks
  • more →

Results

In {Article} -6th May- {70 Comments}

10 Transition Effects: The art of Showing/Hiding Content

Delivering informative structure is the primary task an interactive user interface should be able to cope with. The more intuitive layout structure is designed, the better users can understand the content.

Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 smart javascript techniques for showing and hiding content using different JS libraries.

1. Simple Toggle with CSS & jQuery

Expand-collapse Transition Effects

A simple toggle tutorial with an explanation of how to switch the “open” and “close” graphic state. The markup is pretty straight forward, where the h2 tag is a link that “trigger” the toggle effect. Below the h2, we will have our container where we hold the content.

<h2 class="trigger"><a href="#">Toggle Header</a></h2>
<div class="toggle_container">
	<div class="block">
		<h3>Content Header</h3>
		<!--Content-->
	</div>
</div>

2. jquery-fade-infade-out

Expand-collapse Transition Effects

A nice fade in fade out effect you can add to your website. The effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website wether it be an image, text, a link or even a div.

$(document).ready(function(){
$("ELEMENT HERE").fadeTo("slow", 0.3);
$("ELEMENT HERE").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.3);
});
});

3. How to Mimic the iGoogle Interface

Expand-collapse Transition Effects

In this tutorial you will learn how to create a customizable interface with widgets. Each widget can be collapsed, removed and edited. The widgets can be sorted into the three seperate columns by the user (using a drag and drop technique). The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications using jQuery’s UI library and specifically the “sortable” and “draggable” modules.

4. Show/hide a nice Login Panel using Mootools 1.2

Expand-collapse Transition Effects

In this tutorial, we will see how to create a show/hide login/signup panel for your website using Mootools 1.2

5. jQuery pageSlide

Expand-collapse Transition Effects

jQuery pageSlide is a plugin for jQuery that slides the viewable webpage off-screen, revealing and populating a secondary interaction pane. It may be used in a similar manner to Lightbox, where screen real estate and centralization of the user experience are a concern.

  • The primary window is reserved for content; secondary interactions do not require additional space on the page — the area they need is created and removed on demand.
  • Because the user can see the original window, they have a greater likelihood of retaining focus, and can easily return to the previous task.

6. Liquid expandable section with rounded corners using CSS

Expand-collapse Transition Effects

This tutorial explains how to design a nice liquid expandable section with rounded corners (top-left, top-right, bottom-left, bottom-right) using some lines of CSS, HTML and JavaScript code.

7. How to Make a Smooth Animated Menu with jQuery

Expand-collapse Transition Effects

This menu has a smooth animation using “easing” effect. There are two actions in the code used here. When the mouse moves over a menu item, that item starts an animation where it expands to 150px tall over 0.6 seconds. The easing applied through the plugin is ‘easeOutBounce’ which causes the box to “bounce” a little as it reaches the end of the animation (”out”). When the mouse is moved off the animation to the starting size is triggered.

8. Lazy Load

Expand-collapse Transition Effects

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of view port (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

9. MOOSLIDE – AJAX CONTENT SLIDE

Expand-collapse Transition Effects

MooSlide’s functional solution is to present any contentis. It is a small and slim ajax based extension or replacement of the common “lightbox” that can be found on nearly every page. It is based on the mootools framework.

10. The Sexy Curls jQuery Plugin

Expand-collapse Transition Effects

Sexy Curls jQuery plugin is an open source solution which lets you share in the beauty of the page fold feature with ease. It uses the jQuery UI & its resizable package.

Category: Article | Leave a Comment | 70 Comments

What others said...

70 Comments, Add Comment or Ping



  1. Jay August says:
    May 6, 2009 at 4:24 pm

    Very nice resource, thanks! The lazyload works excellent on big WordPress generated galleries. Saves me on bandwidth and visitors have faster pages. Great!

  2. Max says:
    May 6, 2009 at 10:31 pm

    Nice resource indeed – very useful so thanks for sharing! :-)

  3. speaking.be says:
    May 7, 2009 at 12:01 am

    Nice summary of transition effects!
    You’ve been bookmarked :)

  4. patternhead says:
    May 7, 2009 at 12:25 am

    Great post, bookmarked for future ref, thanks :D

  5. Budi Irawan says:
    May 7, 2009 at 12:36 am

    great article, dude. It is really useful. Thanks

  6. zone1creative says:
    May 7, 2009 at 12:46 am

    Very useful article.

    Now I need to find a site that could benefit from some of these features.

  7. Leafy Designz says:
    May 7, 2009 at 2:37 am

    Brilliant Collection.
    A real Gem.

    Cannot wait to apply most of them.

  8. joão says:
    May 7, 2009 at 2:49 am

    Wow, brilliant article!
    Just delicious’d it! :)

  9. MarcoBarbosa says:
    May 7, 2009 at 3:10 am

    Nice! :D

    Thanks for sharing!

  10. Michi says:
    May 7, 2009 at 3:45 am

    Awesome list!
    Thanks a lot.

  11. munkey says:
    May 7, 2009 at 4:19 am

    very nice list… thanks!

  12. Carlos Martins says:
    May 7, 2009 at 5:57 am

    Nice compilation. Definitely helpful for improving our sites. :)

  13. Art2code says:
    May 7, 2009 at 7:56 am

    Nice collection ! thx

  14. Dinesh V says:
    May 7, 2009 at 10:20 am

    Thanks a ton man.. iGoogle interface really super. Great compilation work. This is first time I’m visiting your site. I do come regularly here aft. It’s promise..

  15. dlv says:
    May 7, 2009 at 11:03 am

    really great collection, i know many of this but others not… thanks!
    to bookmarks

  16. Vinicius Camara says:
    May 7, 2009 at 11:09 am

    Congratulations. Great collection of examples.

  17. Abdel says:
    May 7, 2009 at 12:27 pm

    Thanks. this is a great collection of transitions!

  18. Nebel says:
    May 7, 2009 at 12:47 pm

    Very nice… Thanks for is collection :D

  19. Mohammad Riazi says:
    May 7, 2009 at 1:22 pm

    WOW, great resource…planning to use on next site!

  20. Biz says:
    May 7, 2009 at 1:28 pm

    Very informative lecturing on code application.

  21. dusterD says:
    May 7, 2009 at 3:46 pm

    nice one! thanks

  22. Chris says:
    May 7, 2009 at 9:37 pm

    Very, very nice showcase of effects. A couple of these I know I’ll be using a lot. Thanks!

  23. Scott Petrovic says:
    May 8, 2009 at 10:06 am

    I love it! A lot of these features are quickly replacing a Flash’s need.

  24. Mouse Will Play says:
    May 9, 2009 at 7:52 am

    Great collection – looking forward to trying some of these out. Stumbled!

  25. joyologo design shop 2.0 says:
    May 9, 2009 at 8:31 am

    nice collection, thanks for resources..

  26. Majra says:
    May 10, 2009 at 1:59 pm

    Ну у вас либо талант писать, либо это стыбрено!

  27. ryanm says:
    May 11, 2009 at 2:19 am

    This is a nice list. By the way can anyone give me a link on how to save the position of the drag/drop feature just like the bbc homepage. I been searching the internet to no avail. Thanks

    The list is very helpful though..

  28. alfonso says:
    May 11, 2009 at 7:53 am

    The lazyload is toooooo Great!

  29. Silver Firefly says:
    May 12, 2009 at 2:13 pm

    Thanks for this list. I’ve bookmarked it and I’ll be using a couple of these techniques on my website.

  30. bnc | err0rs.info says:
    May 13, 2009 at 2:38 am

    Some effects added to my site. :P

    One more nice thing: mParallax ;]

  31. Vu Tran says:
    May 17, 2009 at 2:02 pm

    I love this. Thanks for this great resource!

  32. Kathy says:
    May 20, 2009 at 2:24 pm

    Awesome, just as I was struggling (as always) to figure out how to hide/show login at top of my page in my website rework. This is a great post which I found through @DannyOutlaw.. thanks for sharing :)

    Kathy
    @shrinkgurl

  33. Danish Backer says:
    May 26, 2009 at 5:35 am

    Thanks Dude!

  34. Sklep Wędkarski says:
    May 31, 2009 at 1:40 am

    Simple Toggle #1, light, simple but very impressive.

  35. Sura says:
    May 31, 2009 at 2:37 pm

    Где-то я уже похожее читала, пррчём слово в слово.

  36. MegaFill says:
    June 6, 2009 at 10:37 am

    Nice post! thnx

  37. Jack says:
    June 8, 2009 at 4:23 am

    Thanks. Bookmarked and Stumbled !

  38. traffic ticket says:
    June 11, 2009 at 1:25 pm

    Excellent list and resources! Just learning about jquery now and it seems to be great! Thanks

  39. M.Hartz says:
    June 11, 2009 at 2:20 pm

    Impressive list: thumbs up and I’ll use them in the next month. I like smoothe menu jQuery the most I think.

  40. Jaspal Singh says:
    June 15, 2009 at 11:51 pm

    Excellent list of ajax effects, thanks for sharing.

  41. stephen h says:
    June 16, 2009 at 1:18 pm

    bookmarked… thanks!

  42. Todd says:
    June 17, 2009 at 2:20 pm

    Definitely valuable list to hang on, bookmarked. Just don’t change the URL :)

  43. Roro says:
    June 18, 2009 at 9:47 am

    Very useful indeed! Thanks for this :)

  44. cyberick says:
    June 18, 2009 at 12:29 pm

    Thx for sharing.

  45. Cam says:
    June 18, 2009 at 2:04 pm

    awesome! using one of these already and testing another

  46. Креатив says:
    June 20, 2009 at 6:24 am

    Very nice pageSlide ! thx!

  47. Parro says:
    June 24, 2009 at 11:27 am

    Great collection… to my delicious!

Trackbacks/Pingbacks

  • popurls.com // popular today
  • Internet Brain » 10 Transition Effects: The art of Showing/Hiding Content
  • 10 Transition Effects: The art of Showing/Hiding Content : Design Newz
  • Bookmarks for May 6th • Blog Archive • noahcarter . com
  • randalflagg.net
  • Innovation in Web Interactions | UI and us
  • links for 2009-05-07 « Stand on the shoulders of giants
  • Wackeldackel » Blog Archive » Transition Effects
  • vot.eti.me
  • Murmp - 10 Transition Effects: The art of Showing/Hiding Content
  • MakinMo's Tech Blog
  • bookmark post: from devsnippets « hugbug files
  • links for 2009-05-08 « boblog
  • Weekly Links | Shaun Preston
  • jsssc - 一些完美的窗口渐隐弹出效果
  • links for 2009-05-08 « Minesa IT
  • Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
  • Simple Toggle with CSS & jQuery « Vandhematharam
  • Fabián Link » 10 Efectos de transicion: El arte de mostrar y ocultar contenido
  • links for 2009-05-11 « My Weblog
  • Design links for the week « Best Design Content
  • Bookmarks added by Alex Horstmann on May 12th | BlobFisk.com
  • Daily Digest for June 22nd | Loudmouthman
  • Tabs (27)
  • Forms (132)
  • Menu (63)
  • Tables (9)
  • Navigation (36)
  • ToolTips (23)
  • LightBox (41)
  • Calendar (9)
  • AutoComplete (13)
  • Accordion (15)
  • Sliders (40)
  • Gallery (84)
  • Image Effects (62)
  • Date & Time (16)
  • Charts (16)
  • Carousel (12)
  • Tag Clouds (1)
  • Links (1)
  • Layouts (82)
  • IE Hacks (19)
  • Image Sprites (7)
  • Sliding Door (7)
  • Techniques (84)
  • Image Effects (17)
  • Font Styles (22)
  • Positioning (5)
  • Menus (42)
  • Rounded Corner (20)
  • Tools (1)
  • Drop Shadows (1)
  • CSSFrameworks (2)
  • Mootools (84)
  • jQuery (338)
  • Prototype (23)
  • Scriptaculous (10)
  • Javascript (126)
  • javascript Framework (1)
  • LOG IN:

    Not a member? JOIN NOW!
     Username                   Password
    Remember me Recover password

ADVERTISE HERE

Add a Snippet / Design News

Mar/09/2010

5 Important Rules in Website Design

craftdsign
Menu
When it comes to your website, extra attention should be paid to every minute detail ...
Mar/09/2010

Sky Light – A free wordpress

DynamicWP
WordPressWordPress Layouts
Our new free wordpress theme this week. Sky Light theme, we build the theme based ...
Mar/09/2010

How to Create a Fancy Image Gallery...

Teylor Feliz
Image Effects
Even though CSS3 is still in the development stages, it is the new craze that ...
Mar/09/2010

[Code Snippet] jQuery : Show/Hide...

Hidayat Sagita
MenujQuery
This is a very basic technique to show and hide HTML element, we just need ...
Mar/09/2010

How to Create a Nifty Dynamic Shadow...

Dainis Graveris
jQuery
Learn how to create a very nifty looking dynamic shadow with a few teaspoons of ...
Mar/09/2010

Astounding Ajax/CSS Forms: 30+ Modern...

Dainis Graveris
Forms
This article with the title 30 amazing css ajax form will explain the various techniques, ...
Mar/08/2010

Create A Floating Navigation Using...

Seraph
jQuery
As we were saying, jQuery is a powerful tool to use if you want to ...
Mar/08/2010

38 Cool MooTools Plugins Developers...

jenny
FormsMootools
Mootools are one of the very famous Javascript Framework. With this we can write powerful, ...
Mar/07/2010

Music Blogs Powered By WordPress

wparena
WordPressWordPress Layouts
One of the early dreams for the Web was the same as the early dreams ...
Mar/07/2010

jQuery slider out of contact form

saidyavuz
SlidersjQuery
how to crea jquery slide out of contact form
More Code Snippets →

Design Community News

  • Connecting Twitter account with Useful Applications

  • 25 Awesome Tips to Become a Successful Freelancer

  • Text written by Water

  • Inspirational 50 Twitter Backgrounds Showcase

  • Matte Grey Square Icons Alphanumeric

  • Free worn lines Photoshop brush pack Vol 2

  • Free Vector Art: 20 New, Useful Illustration Sets

  • Dental Business Cards: 10 Cool Examples

  • 40+ Effective Call to Action Buttons

  • 80 Beautiful Web Design Trends Of Minimal Site

  • Desktop Wallpaper: 80+ Most Breathtaking Places on Earth

  • 25 Examples of Watercolor Art in Web Design

  • Design an Epic Sci-Fi Style Urban City Scene in Photoshop

  • Free metal, wood, nature texture pack

More News →

Top ↑

Add a Snippet / Design News

Top Submitters

  • Top Submitters

    • dnamic (135)
    • chosen (113)
    • Martin Ivanov (87)
    • ravindra (61)
    • tutorialfeed (55)
    • Spider8411 (47)
    • dicky83 (42)
    • Noura Yehia (41)
    • psdeluxe (35)
    • woork (31)
    • creativenerds (30)
    • ddrive (28)
    • prlamnguyen (26)
    • Oxp (25)
    • tech (23)
    • kailoon (23)
    • Mert TOL (22)
    • satbir (21)
    • Webstandard-Team (21)
    • vladocar (20)
    • templates4all (18)
  • © 2008-2009 DEVSNIPPETS | Made by Noura Yehia | Add Snippet | About| Subscribe
    In partnership with (mt) Media Temple