jQuery动画和CSS位置

如何解决jQuery动画和CSS位置

| 我正在尝试在以下代码中使用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,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\',width: \'40px\',height: \'13px\',\'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的新手，非常感谢。

解决方法

去掉 top: \'0\',left: \'0\', 来自两个animate函数参数并删除

,\'position\': \'absolute\'

从第一个css函数参数开始加：

position:absolute;

到.box1和.box2css类。加

z-index:10;

到.box1CSS类加

top: 25px;    
z-index:0;

到.box2CSS类设置于ѭ7

margin-top:0px;

防止晃动。那是你要的吗？看一下这个： http://jsfiddle.net/M9JkP/4/ ,不知道我是否理解得很好，但是如果您按以下方式进行操作，则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\',width: \'40px\',height: \'13px\',\'swing\');


                });
            });

,我试了一下，得出了我认为是基于您要尝试执行的操作的正确结果。我还制作了expandMenu()和collapseMenu()jQuery函数，以允许使用$(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,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\',padding: \'0px\' 
        },\'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\',padding: \'0px\' 
       },\'swing\');
    return ($(this));    
 };

,我删除了\'position \'：\'absolute \'，这似乎更好： http://jsfiddle.net/gy7t9/

jQuery动画和CSS位置

如何解决jQuery动画和CSS位置

解决方法

相关推荐