JQ animation function

//Set a single style: CSS (attribute, attribute value); - - js sets style through style attribute

//Add class name: addClass("class name")
//Remove the class name: removeClass("class name")
//Determine whether this class name exists: hasClass("class name")
//Switching class: toggleClass("class name")


  //1. Attr (Tag Attribute) - - the same as CSS (Style Attribute)
  
    //prop() ------------- For bool type attributes, do not use attr method, use prop, because: after version 1.6 of jQuery, using attr method will not work, the use of prop method is the same as attr ()



// // The first group: show() and hide(): a process from the upper left corner to the lower right corner
// // 1. No imported parameters: no animation effect
// // 2. Pass in a parameter: show(speed)
// // speed: The duration of an animation, either in milliseconds or in fixed strings
// //                 fast:200ms  normal:400ms  slow:600ms
// // 3. Pass in two parameters: show ([speed], [callback])



// // The second group: slideUp() and slideDown() and slideToggle --- sliding in and out, similar to the curtain door: a process from top to bottom
// // 1. No parameters are passed in: there is also animation effect, with a default normal
// // 2. Pass in a parameter: slideDown(speed)
// // speed: The duration of an animation, either in milliseconds or in fixed strings
// //                 fast:200ms  normal:400ms  slow:600ms
// // 3. Pass in two parameters: slideDown ([speed], [callback])
// // callback: callback function after animation is successful

/*
* animate();
* The first parameter: the object, which contains the required animation style
* The second parameter: speed, the execution time of the animation
* The third parameter: the effect of animation execution, linear swing
* Fourth parameter: callback function
* */

// mouseover: Mouse passing events
// mouseout: Mouse Departure Event

        // mouseenter: Mouse entry event
        // mouseleave: Mouse Departure Event

        // If there are no sub-elements, both types of events can be implemented. Note that if there are sub-elements, there are bubbling events in the mouseover series.


// The first parameter: clearQueue: Whether to clear the animation queue
        // true: Stop animation directly false: Stop the current animation and execute the next animation in the animation queue
        // Second parameter: jumpToEnd: jump to the final animation effect
        // true: jump directly to the final animation effect false: do not jump to the final effect

// jquery creates elements:
// 1. Create jquery object $("tag + content")
// 2. append the jquery object to the parent element
var $a = $('This is a label a.');

// // 2.1 Adding child element append back to parent container
// $("#box").append($a);

// // 2.2 Append child elements back to parent container appendTo
// $a.appendTo($("#box"));

// // 2.3 Add the child element prepend to the parent container
// $("#box").prepend($a);

// // 2.4 Adding child elements from the previous to the parent container prependTo
// $a.prependTo($("#box"));

//=================================================
//Add a label a after the box
// $("#box").after($a);
//Add a label a before the box
$("#box").before($a);