TAILIEUCHUNG - JQuery: Novice to Ninja- P7

JQuery: Novice to Ninja- P7:No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or an actual ninja ninja—virtuosity lies in first mastering the basic tools of the trade. Once conquered, it’s then up to the full-fledged ninja to apply that knowledge in creative and inventive ways. | Animating Scrolling and Resizing 67 Now s a great time to try some different easing functions. Just replace the ones used here with any of the others from the easing plugin you ll be amazed at how much difference they make to the feel of the component. You can also try animating other values changing the blob s color for instance. Animated Navigation Take 2 One of the great advantages to using a library such as jQuery is that you can try out a bunch of different alternatives fairly quickly and pick the one you like best. We still have a few hours left before our client will want to see the progress of our animated navigation. Let s try to approach the same problem from a different angle and see what we can come up with. For this animation our menu items will each have a hidden icon that will bounce into view when the link is moused over as shown in Figure . Figure . Bouncy animated menu The setup for this effect is nice and simple. It s a regular unordered list configured as a horizontal menu but we ve stashed a secret icon underneath the normally visible area. This is just a matter of setting the list item s height so that you can only see the link text by default but as we animate the height the icon bounces into view. We ll start with the CSS we ve moved our menu to be absolutely positioned at the top-right of the container div where there s space for the icons to expand. We ve set a background color for the icons to be set against and employed a clever trick to keep the background images out of view notice that the list items are 20px in height but that the background is offset 30px from the top. As a result they ll be invisible until we expand the height of the list items. We ll also set the background image of each link to a different icon 68 jQuery Novice to Ninja chapter_03 10_animated_navigation_2 excerpt container position relative navigation position absolute width inherit top 0 right 0 margin 0 navigation li height 20px float left

• Đồ họa - Thiết kế - Flash
• thiết kế web
• giáo trình photoshop
• css căn bản
• thủ thuật cắt html
• đồ họa máy tính
• Thiết kế trang web
• hướng dẫn Thiết kế trang web
• kinh nghiệm Thiết kế trang web
• tài liệu Thiết kế trang web
• cẩm nang Thiết kế trang web
• kỹ thuật Thiết kế trang web
• Bài giảng Thiết kế Web
• Đại cương Thiết kế Web
• Tổng quan Thiết kế Web
• Môn học Thiết kế Web
• Mục tiêu Thiết kế Web
• Giáo trình Thiết kế giao diện web
• Thiết kế và quản lý website
• Thiết kế giao diện web
• Nhận dạng các trang web
• Cấu trúc trang web
• phương pháp thiết kế trang Web
• kỹ thuật thiết kế Web
• thiết kế web nhanh
• thực hành thiết kế web
• thiết kế web đẹp
• tài liệu về thiết kế web
• thủ thuật thiết kế web
• mẹo dùng web
• học thiết kế web
• Thiết kế web động
• tài liệu Thiết kế web động
• hướng dẫn Thiết kế web động
• kinh nghiệm Thiết kế web động
• cẩm nang Thiết kế web động