我试图在下面的代码中修复 jquery 动画效果中的 css 位置。
我的绿色和橙色跨度在鼠标悬停时失去控制。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style>
.box1{
width:40px;
height:13px;
float:left;
font-size:.6em; color:#fff; background:#99CC00;
font-family:Arial, Helvetica, sans-serif;
}
.box2{
width:40px;
height:auto;
float:left;
font-size:.6em; color:#fff; background:#FF6600;
font-family:Arial, Helvetica, sans-serif;
margin-top:1px;
opacity:.8;
filter: alpha(opacity=75);
}
</style>
<script>
$(function() {
$('span').hover(function() {
$(this).stop().css({ 'z-index': '999999', 'position': 'absolute', 'float': 'left'}).animate({ marginTop: '0px', marginLeft: '0px', top: '0', left: '0', width: '200px', height: '125px', padding: '0px' }, 700, 'swing');
}, function() {
$(this).stop().css({ 'z-index': '0', 'border': '0px' }).fadeIn('slow').animate({ marginTop: '0px', marginLeft: '0px', top: '0', left: '0', width: '40px', height: '13px', padding: '0px' }, 700, 'swing');
});
});
</script>
</head>
<body>
<table width="160" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="40" height="40" valign="top" bgcolor="#e4e4e4">
<span class="box1">Hello ji</span>
<span class="box2">Sanket</span> </td>
<td width="40" height="40" valign="top" bgcolor="#CCCCCC"> </td>
<td width="40" height="40" valign="top" bgcolor="#999999"> </td>
<td width="40" height="40" valign="top" bgcolor="#666666"> </td>
</tr>
</table>
</body>
</html>
jquery 新手，非常感谢帮助。
最佳答案
不知道我是否理解得很好，但是如果你像下面那样做，span 元素不会改变位置
$(function() {
$('span').hover(function() {
$(this).stop().css({ 'float': 'left'}).animate({ marginTop: '0px', marginLeft: '0px', width: '200px', height: '125px', padding: '0px' }, 700, 'swing');
}, function() {
$(this).stop().css({ 'border': '0px' }).fadeIn('slow').animate({ marginTop: '0px', marginLeft: '0px', width: '40px', height: '13px', padding: '0px' }, 700, 'swing');
});
});
关于javascript - jquery 动画和 CSS 位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6124493/