JQuery fragment (3) animation effects, jquery Fragment

JQuery fragment (3) animation effects, jquery Fragment

5. animation Effects

● Self-made folding content Block

The content block is as follows:

    <div class="module">
        <div class="caption">
<Span> title </span>
            
        </div>
        <div class="body">
Recently, Ma Dexing, a reporter from Sports Weekly, said in an interview with Tianjin Sports Channel's New Horizons program that he was worried about Evergrande's [Weibo] situation, evergrande's dominance is much lower than last season. Evergrande's foreign aid services have overlapping positions. It is an acceptable result to lose away from the game to the Western Sydney wanderer. The program said that Evergrande won the three-game winning streak, while Evergrande couldn't afford to make it. Evergrande lost its overwhelming advantage to other teams, and its ability to decline was at the root of Evergrande's leader status.
        </div>
    </div>

 

Bind a click event to the img element.

        $(function() {
            $('div.caption img').click(function () {
// First find the parent element of the img and then find the child element of the parent element.
                var $body = $(this).closest('div.module').find('div.body');
                if ($body.is(':hidden')) {
                    $body.show();
                } else {
                    $body.hide();
                }
            });
        });

 

You can also use the toggle method to switch the display status of an element.

        $(function() {
            $('div.caption img').click(function () {
                $(this).closest('div.module').find('div.body').toggle();
            });
        });

 

The above is not animated, and sometimes it feels abrupt. In fact, the show, hide, and toggle methods can all have animation effects. For example:

        $(function() {
            $('div.caption img').click(function () {
                $(this).closest('div.module').find('div.body').toggle('slow');
            });
        });

 

For example:

        $(function() {
            $('div.caption img').click(function () {
                $(this).closest('div.module').find('div.body').toggle('slow', function() {
                    $(this).closest('div.module').toggleClass('rolledup', $(this).is(':hidden'))
                });
            });
        });    

 

● Fade in and out elements
FadeIn (speed, callback)
FadeOut (speed, callback)
FadeTo (speed, opacity, callback)

 

● Slide up and down Elements

SlideDown (speed, callback)
SlideUp (speed, callback)
SlideToggle (speed, callback)

 

● Stop Animation

Stop (clearQueue, gotoEnd)

 

● Create a Custom Animation

Animate (properties, duration, easing, callback)

$ ('. Classname'). animate ({opacity: 'toggle'}, 'low ')

 

If you write an extension function.

$. Fn. fadeToggle = function (speed ){
Return this. animate ({opacity: 'toggle '}, 'low ');
}

 

● Custom scaling Animation

$ ('. Classname'). each (function (){
$ (This). animate ({
Width: $ (this). width () * 2,
Height: $ (this). height () * 2
});
});

 

● Custom drop Animation

$ ('. Classname'). each (function (){
$ (This)
. Css ("position", "relative ")
. Animate ({
Opacity: 0,
Top: $ (window). height ()-$ (this). height ()-$ (this). position (). top
}, 'Low', function () {$ (this). hide ();})
});

 

● Custom scatter Animation

$ ('. Classname'). each (function (){
Var position = $ (this). position ();
$ (This)
. Css ({
Position: 'absolute ',
Top: position. top,
Left: position. left
})
. Animate ({
Opacity: 'hide ',
Width: $ (this). width () * 5,
Height: $ (this). height () * 5
Top: position. top-($ (this). height () * 5/2 ),
Left: position. left-($ (this). width () * 5/2)
}, 'Normal ');
});

 

● Animations in the queue

// Animation insert queue
$ ('Img '). queue ('chain', function (){});
$ ('Img '). queue ('chain', function (){});
$ ('Img '). queue ('chain', function (){});
$ ('Img '). queue ('chain', function (){});

$ ('Button '). click (function (){
$ ('Img '). dequeue ('chain'); // delete an animation in the queue
})

CleaeQueue (name) // delete all animations in the unexecuted queue
Delay (duration, name) // adds latency for all unexecuted animations in the queue

 

References: jQuery practice (version 2)

How can we use jquery's animate method to achieve an animation effect?

Let's talk about the second question first:
Odd row: even, even row odd
Your situation is
$ ("Table> tr: even") returns an odd number of rows.
$ ("Table> tr: odd") gets an even number of rows, and then calls css or attr ("class ", "...").

First question:
It is not clear whether you want to scroll up or in what direction, but you can use the. delay () method for delayed loading. Just do a recursive load.
Click zoom in to create two layers. The width and height of one layer are both 100%. You can use fadeTo to set transparency to cover the background (note that the z-index attribute is set ), you can use ajax to obtain images and load them to the second layer. clone method.
We recommend that LZ find an api. You can find the answer to most of the questions above. If you want it, I have an API of the Chinese version JQuery1.4.

Jqueryeasing13 is different from ordinary jquery, such as jquery132.

Easing is an animation special effect plug-in that can achieve easing and other effects.