javascript - jquery:将鼠标悬停在一个元素上时如何为多个元素设置动画？

Question

我有以下 HTML 代码。

<div id="table1"></div>
  <script>
    var arr = [
    ["s1","s2","s3"],
    ["sk1","sk2","sk3"],
    ["skl1","skl2"]
    ];
    table_generator("table1", arr);
  </script>

现在要将表格添加到此 div，我有以下 javascript 代码。

<script>
      function table_generator(body_table_name, s_array) {

        var body_table = document.getElementById(body_table_name);

        //Create table section
        var table = document.createElement("TABLE");
        table.setAttribute("id", "table_"+body_table_name);

        //Append to body div
        body_table.appendChild(table);

        //Add rows
        var row_length = s_array.length;
        for(var i = 0; i <row_length;  i++)
        {
           row(s_array[i], "row"+i, "table_"+body_table_name);
        }

        assign_height_width_hover_effects();
    }
</script>

要在表中添加行，我有这个 javascript 函数

<script>
  function row(td_array, row_name, table_name) {
    //Create row
    var tr = document.createElement("TR");
    tr.setAttribute("id", "tr_"+row_name);
    document.getElementById(table_name).appendChild(tr);

    //Create the tds
    for(var i = 0; i<td_array.length; i++)
    {
      var td = document.createElement("TD");
      td.setAttribute("id", "td_"+td_array[i]);
      tr.appendChild(td);

      //Add td styling
      td.style.transition = "all 0.5s ease-in-out";

      //Add text to cell
      var name = document.createElement("SPAN");
      name.setAttribute("id", "name_"+td_array[i]);
      name.innerHTML = td_array[i];
      td.appendChild(name);

      //Add skill info
      var info = document.createElement("SPAN");
      info.setAttribute("id", "info_"+td_array[i]);
      info.innerHTML = "Some info here";
      name.appendChild(info);

      //Add styling to this info
      info.style.position = "absolute";
      info.style.width = "inherit";
      info.style.height = "inherit";
      info.style.overflow = "hidden";
      info.style.opacity = 0;
      info.style.transition = "all 1s ease-in-out 0.4s";
      info.style.transform = "scale(0)";

      //Calculate cell width
      var width = (td.clientWidth + 1);
      if (width > max_width)
      {
        max_width = width;
      }

      //Push it in array
      main_array.push(td_array[i]);
    }
  }
</script>

最后，为了给表格单元格指定高度和宽度并添加悬停效果，我调用了以下函数

<script>
  function assign_height_width_hover_effects() {
    //Assigh height and width to all cells in that row
    for(var i = 0; i<main_array.length; i++)
    {
      var td = document.getElementById("td_"+main_array[i]);
      var name = document.getElementById("name_"+main_array[i]);
      var info = document.getElementById("info_"+main_array[i]);

      //Add styling to td
      td.style.width = max_width+"px";
      td.style.height = max_width+"px";
      td.style.textAlign = "center";    
      td.style.boxShadow = "rgb(0, 0, 0) 0px 0px 0px 0px inset";

      //Here is where I need help
      $(td).hover(
        function(){
          $(this).stop().animate({boxShadow: '0 0 '+max_width+'px'}, 'fast');
          //$(this).stop().animate({"opacity": 0});
        }, 
        function(){
          $(this).stop().animate({boxShadow: '0 0 0'}, 'fast');
          //$(this).stop().animate({"opacity": 1});
    }
    );
    }
  }
</script>

基本上我想要的是为以下内容制作动画:

• 当鼠标进入td表格单元格时:

  • td 单元格的框阴影动画到特定颜色
  • id 为“name”的 span 元素位于 td 单元格内以逐渐消失，我使用不透明度 0 来做到这一点。
  • 以及要显示在 td 单元格内的 ID 为“info”的 span 元素，我使用不透明度 1 来做到这一点。

• 当鼠标离开 td 表格单元格时:

  • 要恢复正常动画的 td 单元格的框阴影。那就是走开
  • id 为“name”的 span 元素在 td 单元格内显示回来，我使用不透明度 1 来做到这一点。
  • 并且 td 单元格内的 id 为“info”的 span 元素逐渐消失，我使用不透明度 0 来做到这一点。

现在我可以单独为框阴影设置动画，或者为名称元素的淡入淡出设置动画，但不能同时设置两者。

Answer 1

你应该能够用 css 更容易地做到这一点

td {
  transition: box-shadow 1s ease 0s;
  box-shadow: 5px 5px 5px #000;
  padding: 20px;
}

td:hover {
  box-shadow: 5px 5px 5px #f00;
}

td .name {
  transition: opacity 1s ease 0s;
  opacity: 1;
}

td:hover .name {
  opacity: 0;
}

td .info {
  transition: opacity 1s ease 0s;
  opacity: 0;
}

td:hover .info {
  opacity: 1;
}

<table>
  <tbody>
    <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
    </tr>
    <tr>
      <td>2-1</td>
      <td>2-2</td>
      <td>2-3</td>
    </tr>
  </tbody>
</table>

我确实将名称和信息的选择器更改为类而不是 ID，因为 ID 应该是唯一的。

注意:这是一个简单的例子。您需要在 td 之前添加另一个特定的选择器，这样它就不会应用于您页面/站点上的每个表。