jquery简单动画效果实践(一)

原地踏步踏步踏步踏步

墨衍会员 · AI 创作全网分发码龄12年

关注

原创最新推荐文章于 2025-08-06 23:01:37 发布 1k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

这篇博客将介绍一个简单的jquery动画

js完成了DOM的状态切换，通过鼠标进入事件记录了当前的激活列，并且清除了之前的激活列。
css定义了不同状态的形态，以及形态切换的姿势。

接下来将会涉及到：

CSS
Jquery

作品目标：CSS浮动四列布局的基础上为每一列增加鼠标进入事件，从而实现鼠标进入每一列时该列被激活，改变CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="y-row">
    <ul class="card-area">
      <li class="card-item active"></li>
      <li class="card-item"></li>
      <li class="card-item"></li>
      <li class="card-item"></li>
    </ul>
  </div>
  <script src="js/jquery.min.js"></script>
  <script>
    //鼠标移入列激活，其他列默认
    $(document).on('mouseenter','.card-item',function(e){
      var $this = $(e.target),$active;
      $this.is('li') || ($this = $this.closest('li'));
      $active = $this.siblings(".active");
      $active.toggleClass('active');
      $this.addClass('active');
    });
  </script>
</body>
</html>

.y-row {
    min-width: 1000px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    zoom: 1;
}
article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}
.y-row * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.card-area{
    margin: 82px auto 0 auto;
    width: 1180px;
}
.card-item{
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.12s;
    position: relative;
    float: left;
    width: 22%;
    height: 548px;
    background-color: transparent;
    border: 1px solid #DBDBDD;
}
.card-item.active{
    z-index: 100;
    border: 1px solid #00c1de;
    box-shadow: 0 0 20px rgba(0, 198, 226, 0.5);
    width: 34%;
    height: 563px;
}

需要注意的是，在这个动画示例中css和js的职责分工。
js完成了DOM的状态切换，通过鼠标进入事件记录了当前的激活列，并且清除了之前的激活列。
css定义了不同状态的形态，以及形态切换的姿势。
之所以要js掺和进来，是因为这个动画里面涉及到了状态信息，已经不是单个DOM元素的变化。
所以说，核心的需要理解记忆且灵活运用的代码是。

$(document).on('mouseenter','.card-item',function(e){
      var $this = $(e.target),$active;
      $this.is('li') || ($this = $this.closest('li'));
      $active = $this.siblings(".active");
      $active.toggleClass('active');
      $this.addClass('active');
    });

.card-item{
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.12s;
    position: relative;
    float: left;
    width: 22%;
    height: 548px;
    background-color: transparent;
    border: 1px solid #DBDBDD;
}
.card-item.active{
    z-index: 100;
    border: 1px solid #00c1de;
    box-shadow: 0 0 20px rgba(0, 198, 226, 0.5);
    width: 34%;
    height: 563px;
}