jquery animation & CSS Position
I am trying to fix the css position in the with jquery animation effect in the below code.
my green and orange span running out of control on mouse 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>
开发者_如何学C
</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>
New to jquery, help much appreciated.
Don't know if I understood it well, but if you do it like below, the span elements dont change the 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');
});
});
I played around with it a little bit and got, what I think is, the correct result based on what it appears you are trying to do. I've also made an expandMenu() and collapseMenu() jQuery function to allow easy expanding/collapsing using $(this).expandMenu();. For Demonstration, I also added the collapseMenu() call to the click() binding so when an expended item is clicked, it collapses.
Working Sample: http://jsfiddle.net/sqCN5/4/
Updated 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);
}
Updated 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));
};
Remove
top: '0', left: '0',
from both animate function parametres
and remove
, 'position': 'absolute'
from first css function paramteres
Add:
position:absolute;
to .box1 and .box2 css classes.
Add
z-index:10;
to .box1 css class
Add
top: 25px;
z-index:0;
to .box2 css class
Set on .box2
margin-top:0px;
to prevent shake.
Is that what you want?
Check this out:
http://jsfiddle.net/M9JkP/4/
I removed the 'position': 'absolute', and it seems better:
http://jsfiddle.net/gy7t9/
加载中,请稍侯......
精彩评论