jquery动画方法总结

话不多说，直接贴代码：

const css_ = {
    width:100+'px',
    height:100+'px',
    background:'purple'
};

$('div').css(css_);

$('div').eq(1).attr('class','odiv1');
$('.odiv1').css(css_);
$('.odiv2').css(css_);
$('.odiv3').css(css_);
//clone elements and bindly events
//$('div').clone().appendTo($('p'));
$('p').css('display','none');


//hide and show(speed,callback)  | toggle()
$('div').bind({
    click:function() {
        //show(speed,callback);
        //speed:fast normal slow and some seconds
        $('p').show('slow',function() {
           $('p').hide('slow',function() {
               console.log('haha  我又不见了')
             $('p').toggle();
             console.log('我被 toggle出来了');
           })
        });
    },
    mouseover:function() {

    //slideDown | slideUp | slideToggle
      //these can only heights is effective;

        $('.odiv1').slideDown('slow',function() {
            console.log('down');
        });

        $('.odiv1').slideUp('slow',function() {
            console.log('up');
        });

        $('.odiv1').slideToggle('slow',function() {
            console.log('toggle');
        });
    },
    mouseout:function() {

        //fadeIn | fadeOut |fadeToggle | fadeTo
   //****
   // stop can prevent all animations

        $('.odiv1').stop();

        $('.odiv2').fadeIn('slow',function() {
            console.log('in fade');
        });

        $('.odiv2').fadeOut('slow',function() {
            console.log('out fade');
        });

        $('.odiv2').fadeToggle('slow',function() {
            console.log('toggles fade');
        });

      // TOP 0.8 is stopped |opacity attributes is must needed
        $('.odiv2').fadeTo('slow',0.8,function() {
            console.log('to');
        });


        //is  Animate functions |  use css to product animations
        // animate({css},speed,callback)
        $('.odiv3').animate({
            //'background':'blue'  jq can't resolve color functions and need tools
        //    height:'toggle',// zhi can toggle| hide |show
           width:'+=20px' //can set reletive zhi /xiang dui zhi |auto changed

        },'slow',function() {
            console.log('animations here')
        });

        // animate ()  animate() ....   can xingcheng  team to start


    }


});

$('.button1').css({
    position:'absolute',
    right:0,
    top:0
})

$('.button2').css({
    position:'absolute',
    right:0,
    top:200
})

// 管理元素上自行的函数队列 .queue() .dequeue();

//让其在队列中停止

//  care elements



$('.button1').click(function() {
    $('div').queue('fx',[]);
    $('div').stop();
})

$('.button2').click(function() {
    $('div').slideDown(2000,function() {
            console.log('down');
        });
$('div').queue(function() {   //  | callback function  可以管理该元素上的正在执行的队列函数
        $(this).dequeue(); // must
    });
        $('div').slideUp('slow',function() {
            console.log('up');
        });
$('div').queue(function() {   //  | callback function  可以管理该元素上的正在执行的队列函数
        $(this).dequeue(); // must
    });
        $('div').slideToggle(5000,function() {
            console.log('toggle');
        });
    $('div').queue(function() {   //  | callback function  可以管理该元素上的正在执行的队列函数
        $(this).dequeue(); // must
    });
     $('div').fadeIn('slow',function() {
            console.log('in fade');
        });
$('div').queue(function() {   //  | callback function  可以管理该元素上的正在执行的队列函数
        $(this).dequeue(); // must
    });
        $('div').fadeOut('slow',function() {
            console.log('out fade');
        });
    $('div').queue(function() {   //  | callback function
        $(this).dequeue(); // must
    });
    
})



console.log($('div').queue("fx",[]));

上边都是学习时做的笔记，可能看的不太清除，不懂欢迎评论区赐教~