TAILIEUCHUNG - JQuery: Novice to Ninja- P6

JQuery: Novice to Ninja- P6: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. | 52 jQuery Novice to Ninja Animating CSS Properties We have mastered some valuable examples of animation so far sliding fading and some fancy hiding and showing but we haven t had a lot of control over what exactly is animated and exactly how it happens. It s time to introduce a very exciting jQuery function helpfully called animate which lets you animate a whole host of CSS properties to fashion some striking effects of your own. Let s have a look at an example of animate in action chapter_03 01_animating_css excerpt p .animate padding 20px borderBottom 3px solid 8f8f8f borderRight 3px solid bfbfbf 2000 This code will animate all paragraphs on the page changing the padding from its initial state to 20px and adding a beveled border over a period of 2 seconds 2 000 milliseconds . To use animate we pass an object literal containing the properties we would like to animate specified as key value pairs much the same as when you assign multiple properties with the css function. There s one caveat that you ll need to remember property names must be camel-cased in order to be used by the animate function that is to say you ll need to write marginLeft instead of margin-left and backgroundColor instead of background-color. Any property name made up of multiple words needs to be modified in this way. The time span parameter works exactly the same way as the simple animations we saw in Chapter 2 you can pass a number of milliseconds or one of the strings slow fast or normal. Values for CSS properties can be set in pixels ems percentages or points. For example you could write 100px 10em 50 or 16pt. Even more excitingly the values you define can be relative to the element s current values all you need to do is specify or - in front of the value and that value will be added to or subtracted from the element s current property. Let s use this ability to make our navigation menu swing as we pass our mouse over the menu items using the hover function Animating Scrolling and

• Đồ 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