Home/ Questions/Q 5951163
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T17:29:51+00:00

I am trying to fix the css position in the with jquery animation effect

  • 0

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>


</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 much appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0