gpt4 book ai didi

javascript - jquery 动画和 CSS 位置

转载 作者:行者123 更新时间:2023-11-29 15:03:40 24 4
gpt4 key购买 nike

我试图在下面的代码中修复 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">&nbsp;</td>
<td width="40" height="40" valign="top" bgcolor="#999999">&nbsp;</td>
<td width="40" height="40" valign="top" bgcolor="#666666">&nbsp;</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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com