JQuery 操作Class实现前段交互方案（推荐）

一、JQuery基础+控制图片宽度实现动画交互

1.html页面声明周期

//页面生命周期

//页面的数据html，加载完成， 图片+ajax+视频 在异步加载中

//document.ready---DOMContentLoaded  ----小程序onload   ---Vue created()

//页面加载完成

//window.onload  ---小程序onload  ----- Vue mounted()

2.Jquery操作class整理

//jQuery 操作class

//判断样式 hasClass('样式名称')

//添加样式 addClass('样式名称')

//移除样式 removeClass('样式名称')

//切换样式 toggleClass('样式名称')

3.控制图片宽度动画交互

css

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

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

html+js

效果：

 

二、Jquery鼠标滑过下拉效果动画

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

    切换

效果：

 

三、Jquery实现消息通知动画效果

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：

    温馨提示，这是一条通知

效果：

重点总结：

通过Jquery控制元素的class属性的添加或者移除，实现交互动画效果；

css通过class名称控制变换效果。

更多：

 Ajax 重复提交问题处理方案

JQuery 键盘事件使用整理

Jquery 事件绑定使用整理