tailieunhanh - Practical prototype and scipt.aculo.us part 39

Practical prototype and part 39: The information in this book is distributed on an "as is" basis, without warranty Although every pre-caution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. | CHAPTER 10 INTRODUCTION TO EFFECTS 223 Our JavaScript needn t be changed new box style left 50px top 50px duration Now instead of moving down and to the right the box moves up and to the left as shown in Figure 10-5. is smart enough to figure out how to get from A to B. Figure 10-5. The element starts somewhere else but ends up where the previous animation started. 224 CHAPTER 10 INTRODUCTION TO EFFECTS Morphing in Parallel Perhaps the best thing about is its ability to animate several different things at once. Let s see how it handles some curveballs CSS box position absolute width 50px height 50px top 0 left 0 background-color 999 border 2px solid 000 font-family Helvetica Neue text-transform uppercase text-align center line-height 50px font-size 10px JS box .morph width 100px height 100px top 125px left 150px backgroundColor 000 borderColor bbb color fff lineHeight 100px fontSize 18px textTransform lowercase duration Still with me We re animating a lot of properties here the box s size positioning background color and border color plus the text s color size and line height. We change line height in order to keep the text vertically aligned in the center of the box. We set a longer duration for this effect to make sure all these changes are happening in parallel. handles it with aplomb see Figure 10-6 . CHAPTER 10 INTRODUCTION TO EFFECTS 225 BOX BOX Figure 10-6. can animate any number of CSS properties at once. Notice however that our text-transform property was ignored. There s no way to animate the switch from uppercase to lowercase so can t do anything with .