[英]jquery animation & CSS Position
我正在嘗試修復 css position 與 jquery Z6F1C25ED15230962F1BBF9DEEBE9 代碼。
我的綠色和橙色跨度在鼠標 hover 上失控。
<!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 的新手，非常感謝您的幫助。
不知道我是否理解得很好，但如果你像下面那樣做，跨度元素不會改變 position
$(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');
});
});
我對它進行了一些嘗試，並得到了我認為的正確結果，這取決於您正在嘗試做的事情。 我還制作了一個expandMenu()和collapseMenu() jQuery function 以允許使用$(this).expandMenu(); . 對於演示，我還向click()綁定添加了collapseMenu()調用，因此當單擊已消耗的項目時，它會折疊。
工作樣本： http://jsfiddle.net/sqCN5/4/
更新了 CSS
span{
position: absolute;
}
.box1{
width:40px;
height:13px;
float:left;
font-size:.6em;
color:#fff;
background:#99CC00;
font-family:Arial, Helvetica, sans-serif;
}
.box2{
top:25px;
width:40px;
height:auto;
font-size:.6em;
color:#fff;
background:#FF6600;
font-family:Arial, Helvetica, sans-serif;
margin-top:1px;
opacity:.8;
filter: alpha(opacity=75);
}
更新了 JS
$('span').hover(function() {
$(this).expandMenu();
}, function() {
$(this).collapseMenu();
}).click(function(){
$(this).collapseMenu();
});
$.fn.collapseMenu= function() {
$(this)
.stop()
.css({
'border': '0px'
})
.fadeIn('slow')
.animate({
width: '40px',
height: '13px',
padding: '0px'
}, 700,'swing', function(){
$(this).css({'z-index': '0'});
});
return ($(this));
};
$.fn.expandMenu= function() {
$(this)
.stop()
.css({
'z-index': '999999',
'border' : '1px solid #000'
})
.animate({
width: '200px',
height: '125px',
padding: '0px'
}, 700, 'swing');
return ($(this));
};
消除
top: '0', left: '0',
來自兩個animate function 參數
並刪除
, 'position': 'absolute'
從第一個css 8CBA22E28EB17B5F5C6AE2A266AZ function 參數開始
添加：
position:absolute;
到.box1和.box2 8CBA22E28EB17B5F5C6AE2A266AZ 類。
添加
z-index:10;
至.box1 css class
添加
top: 25px;
z-index:0;
至.box2 css class
設置在.box2
margin-top:0px;
以防止晃動。
那是你要的嗎？
看一下這個：
我刪除了“位置”：“絕對”，看起來更好：
jQuery在位置.animation（..）之后通過.css（..）將div位置更改
[英]JQuery change div position by .css(..) after position .animation(..)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.