[英]jquery: how to animate multiple elements when hovered over one element?
I have the following HTML code. 我有以下HTML代码。
<div id="table1"></div>
<script>
var arr = [
["s1","s2","s3"],
["sk1","sk2","sk3"],
["skl1","skl2"]
];
table_generator("table1", arr);
</script>
Now to add table to this div, I have following javascript code. 现在要将表添加到该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>
To add rows inside the table I have this javascript function 要在表格中添加行,我具有此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>
And finally, to give the height and width to table cells and add the hover effects I call the following function 最后,为表格单元格提供高度和宽度并添加悬停效果,我调用以下函数
<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>
Basically what I want is to animate the following: 基本上,我要设置以下动画:
When the mouse enters the td table cell: 当鼠标进入td表单元格时:
When the mouse leaves the td table cell: 当鼠标离开td表单元格时:
Now I am able to animate the box shadow alone, or the fade in - fade out of the name element but not both together. 现在,我可以单独对框阴影进行动画处理,或者对名称元素进行淡入或淡出动画,但不能同时对两者进行动画处理。
You should be able to do this much easier with just css 您仅需使用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>
I did change the selectors for name and info to classes instead of ID since IDs should be unique. 我确实将名称和信息的选择器更改为类而不是ID,因为ID应该是唯一的。
Note: this is a simple example. 注意:这是一个简单的示例。 You will want to add another specific selector before td that way it won't apply to EVERY table on your page / site. 您将要在td之前添加另一个特定的选择器,这样它就不会应用于您的页面/站点上的每个表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.