[Coursera x K-mooc] JS2 : MD-02 [ jQuery - animation효과, Easing Plugin ]

---

◆ JS2 : MD-01 [ jQuery 란?,  jQuery 적용하기, jQuery API, jQuery를 이용한 접히는 메뉴 바 ]

◆ JS2 : MD-02[ jQuery - animation효과, Easing Plugin]

◆ JS2 : MD-03

◆ JS2 : MD-04

---

◈ jQuery - animation 효과

 

?? 왜 내 animate에서 left 움직이는 효과 내꺼는 왜 적용이 안 되지???

참고 : naverD2

 

animation 효과를 html interface에서 사용하는 이유는, 그러한 작성이 사용자들에게 화면이 비주얼적으로 어떠한 효과를 나타내며 변하는지 보여주기 쉽기 때문이다. interface에 작성하는 것은 사용자가 제품의 작동 방식을 이해하는데 도움이 되는 방식으로 사용자가 interface 내 콘텐츠 흐름에 집중하도록 하는 것이 가장 중요하다. 

---

▷▶jQuery 버전 

 

▷▶순수 javascript 버전

 

◈ jQuery 속 Easing PlugIn 

 

◈ callback 함수

 

 

※ Test ※

1. Which of the following can be passed to the hide() function to animate the effect? 

     A : normal / fast / slow / *time - 300

 

2. what is the purpose of the callback function? 

    A : It allows you to do something else, such as show an alert dialog box, when the animation completes.

          * the callback function is useful to provide your user with additional feedback after animation.

 

3. Which of these statements is true about easing? 

    A : More advanced easing is available with a plugin. 

    A : Basic easing is built into jQuery

    A : maybe, Easing affects the speed of the animation

 

4. What is the range of values for fading? 

   A : 0 (transparent) to 1 (opaque)

 

5. What do you need to pass the custom animate() function? 

   A : javascript object 

       * The animate() function takes an object. 

 

 6. Which of these statements is true about custom animations? 

    A : The javaScript object can take multiple CSS properties

    A : Multi-word Css properties need to be written with JavaScript names(no hyphens)

    A : You can animate some, but not all CSS properties. 

 

7. What do you need to do to make sure that the links in a tab interface reference the correct content div?

    A : Set the href of the anchor to the id of the tab's div 

        * This will associate the tab with the correct content div. 

 

8. How can you remove an event listener and prevent the flashing bug? 

    A : Set the once property to ture on the event Listener

         * This will automatically remove the listener once it executes(작동V).