Geek asks and answers

JQuery animation and CSS position

I am trying to fix the css position in the jQuery animation effect in the code below.

my green and orange span ends out of control on 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">&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>

New to jquery, help evaluate.

+3
source share
4 answers

Remove

top: '0', left: '0',

from function parameters animate

and delete

, 'position': 'absolute'

with the first cssparamteres function

Add

position:absolute;

before .box1and .box2css classes.

Add

z-index:10;

to .box1class css

Add

top: 25px;    
z-index:0;

up .box2class css

Set .box2

margin-top:0px;

to prevent shake.

Is this what you want?

Check this:

http://jsfiddle.net/M9JkP/4/

0
source

, , , , 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');


                });
            });
+1

, , , , , -, . expandMenu() collapseMenu() jQuery, / $(this).expandMenu();. collapseMenu() click(), , , .

: 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));    
 };
+1

'position': 'absolute', :

http://jsfiddle.net/gy7t9/

0

More articles:


All Articles