JQuery operates Class to realize front-end interaction scheme (recommended)

1. JQuery basics + control picture width to realize animation interaction

1. HTML page declaration cycle

//page life cycle

//The data html of the page, the loading is complete, the picture+ajax+video is loading asynchronously

//document.ready---DOMContentLoaded----small program onload---Vue created()

//page loaded

//window.onload --- applet onload ----- Vue mounted()

2. Jquery operation class arrangement

//jQuery operation class

//judgment style hasClass('style name')

//Add style addClass('style name')

//Remove style removeClass('style name')

//Switch style toggleClass('style name')

3. Control the picture width animation interaction

css

        .block{
            width: 200px;
            transition: all ease 1s;
        }

        /**
        样式名字可以处理效果
        **/
        .block.active{
            width: 800px;
            height: auto;
        }

html+js

<img class="block" src="http://www.jnqianle.cn/upload/logo/content/202301/30/075fae49-4808-436c-ae7e-d1cf4dcc0a5d.jpg" alt="">
<script>
    
    $(function(){

        //点击事件
        $('img').click(function(){
            $(this).toggleClass('active');
        });

    });
</script>

Effect:

 

Two, Jquery mouse slides over the drop-down effect animation

css

.block {
    width: 100px;
    height: 0px;
    transition: all ease 0.6s;
    background: green;
    opacity: 0;
}

/**
样式名字可以处理效果
**/
.block.active {
    height: 100px;
    opacity: 1;
}
.btn {
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: blue;
    color: white;
    border-radius: 10px;
}

html+js

<div class="btn">
    切换
</div>
<div class="block"></div>
<script>
    $(function () {
        //点击事件
        $('.btn').mouseenter(function () {
            $('.block').addClass('active');
        }).mouseout(function () {
            $('.block').removeClass('active');
        });

    });
</script>

Effect:

 

3. Jquery realizes the animation effect of message notification

css：

.block {
    padding: 10px 20px;
    height: 30px;
    transition: all ease 0.6s;
    background: green;
    position: fixed;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    color: white;
}
/**
样式名字可以处理效果
**/
.block.active {
    opacity: 1;
    top: 300px;
}

.btn {
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: blue;
    color: white;
    border-radius: 10px;
}

html+Js：

<div class="block">
    温馨提示，这是一条通知
</div>
<script>
    $(function () {
        //点击事件
        $('.block').addClass('active');

        setTimeout(() => {
            $('.block').removeClass('active');
        }, 2000);
    });
</script>

Effect:

Key summary:

Add or remove the class attribute of the control element through Jquery to achieve interactive animation effects;

CSS controls the transformation effect through the class name.

More:

 Ajax duplicate submission problem solution

JQuery keyboard event usage arrangement

Jquery event binding using collation