jQuery 效果、动画和 CSS

发布于 2024-11-09 18:33:19 字数 3956 浏览 0 评论 0原文

我正在尝试在鼠标悬停时获得平滑的 jquery 动画（通过淡入/淡出等动画扩展潜水平滑）效果。

我已经在下面的代码中使用绿色层上的 css 完成了此操作，但无法实现 Jquery 平滑动画效果，正如我在上面提到的那样。

这是我的简单代码。

<!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;
        z-index:1;
        overflow:hidden;
    }
.box1:hover{
                width:200px;
                float:left;
                height:125px;
                z-index:99999999;
                position:relative;
                cursor:default;
                opacity:.8;
                filter: alpha(opacity=75);
                overflow:visible;
                }   
.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);


    }
.box2:hover{
                width:200px;
                float:left;
                height:125px;
                position:relative;

                }   

</style>




</head>

<body>
<table width="160" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="40" height="40" valign="top" bgcolor="#e4e4e4">
        <table width="40" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div style="width:40px; height:auto; float:left; position:absolute;">
        <span class="box1">Hello <ul><li>Sanket</li><li>Pratp</li><li>Deora</li></ul></span>
</div>
</td>
  </tr>
  <tr>
    <td><div style="width:40px; height:auto; float:left; position:absolute; top:21px;"><span class="box2">Sanket</span></div></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

    </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>
  <tr>
    <td width="40" height="40" valign="top" bgcolor="#666666">&nbsp;</td>
    <td width="40" height="40" valign="top" bgcolor="#999999">&nbsp;</td>
    <td width="40" height="40" valign="top" bgcolor="#CCCCCC">&nbsp;</td>
    <td width="40" height="40" valign="top" bgcolor="#E4E4E4">&nbsp;</td>
  </tr>
  <tr>
    <td width="40" height="40" valign="top" bgcolor="#E4E4E4">&nbsp;</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>
  <tr>
    <td width="40" height="40" valign="top" bgcolor="#666666">&nbsp;</td>
    <td width="40" height="40" valign="top" bgcolor="#999999">&nbsp;</td>
    <td width="40" height="40" valign="top" bgcolor="#CCCCCC">&nbsp;</td>
    <td width="40" height="40" valign="top" bgcolor="#E4E4E4">&nbsp;</td>
  </tr>
</table>
</body>
</html>

我是 jquery 的新手，非常感谢您的帮助。

原文

I am trying you get a smooth jquery animate (expand dive smooth with animation like fade-in/out ) effect on mouse hover.

I have done this using css on green layer in below code but not able to implement Jquery smooth animation effect as i mention above lines.

Here is my simple code.

<!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;
        z-index:1;
        overflow:hidden;
    }
.box1:hover{
                width:200px;
                float:left;
                height:125px;
                z-index:99999999;
                position:relative;
                cursor:default;
                opacity:.8;
                filter: alpha(opacity=75);
                overflow:visible;
                }   
.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);


    }
.box2:hover{
                width:200px;
                float:left;
                height:125px;
                position:relative;

                }   

</style>




</head>

<body>
<table width="160" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="40" height="40" valign="top" bgcolor="#e4e4e4">
        <table width="40" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div style="width:40px; height:auto; float:left; position:absolute;">
        <span class="box1">Hello <ul><li>Sanket</li><li>Pratp</li><li>Deora</li></ul></span>
</div>
</td>
  </tr>
  <tr>
    <td><div style="width:40px; height:auto; float:left; position:absolute; top:21px;"><span class="box2">Sanket</span></div></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

    </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>
  <tr>
    <td width="40" height="40" valign="top" bgcolor="#666666"> </td>
    <td width="40" height="40" valign="top" bgcolor="#999999"> </td>
    <td width="40" height="40" valign="top" bgcolor="#CCCCCC"> </td>
    <td width="40" height="40" valign="top" bgcolor="#E4E4E4"> </td>
  </tr>
  <tr>
    <td width="40" height="40" valign="top" bgcolor="#E4E4E4"> </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>
  <tr>
    <td width="40" height="40" valign="top" bgcolor="#666666"> </td>
    <td width="40" height="40" valign="top" bgcolor="#999999"> </td>
    <td width="40" height="40" valign="top" bgcolor="#CCCCCC"> </td>
    <td width="40" height="40" valign="top" bgcolor="#E4E4E4"> </td>
  </tr>
</table>
</body>
</html>

I am new to jquery, help much appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

祁梦 2024-11-16 18:33:19

您的问题与此非常相似： jQuery.animate()仅使用 css 类，没有显式样式

或者您可以简单地使用此插件：http://code.google.com/p/jq-class-anim/

回复收藏 0 原文

離殇 2024-11-16 18:33:19

你可以做 lyk dis ...只是一个解释事情的例子

 $(function() {
            $('your-dom-element').hover(function() {

                   $(this).stop().css({ 'z-index': '999999', 'position': 'absolute', 'float': 'left', 'border': 'dotted 5px black' }).animate({ marginTop: '-110px', marginLeft: '-110px', top: '20%', left: '10%', width: '700%', height: '400%', padding: '20px' }, 200, 'swing');


                }, function() {

                    $(this).stop().css({ 'z-index': '0', 'border': '0px' }).fadeIn('slow').animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 200, 'swing');


                });
            });

You can do lyk dis ...just an example to explain things

 $(function() {
            $('your-dom-element').hover(function() {

                   $(this).stop().css({ 'z-index': '999999', 'position': 'absolute', 'float': 'left', 'border': 'dotted 5px black' }).animate({ marginTop: '-110px', marginLeft: '-110px', top: '20%', left: '10%', width: '700%', height: '400%', padding: '20px' }, 200, 'swing');


                }, function() {

                    $(this).stop().css({ 'z-index': '0', 'border': '0px' }).fadeIn('slow').animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 200, 'swing');


                });
            });

回复收藏 0 原文

酷到爆炸 2024-11-16 18:33:19

$("#element").hover(function(){
    $("#div")
    .animate({height: x + "px"}, 500);
    });

请随意在最近的项目（成人网站）中查看它的版本，只需单击搜索：

fuckedapps.com

$("#element").hover(function(){
    $("#div")
    .animate({height: x + "px"}, 500);
    });

Feel free to see a version of it in a recent project (adult site), just click on search:

fuckedapps.com

回复收藏 0 原文

~没有更多了~

关于作者

骄傲

暂无简介

0 文章

0 评论

23 人气

关注发私信

烙印

文章 0 评论 0

关注

singlesman

文章 0 评论 0

关注

给自己一个微笑

文章 0 评论 0

关注

独孤求败

文章 0 评论 0

关注

晨钟暮鼓

文章 0 评论 0

关注

我是自愿种绣球花的

文章 0 评论 0

友情链接

文江博客

jQuery 效果、动画和 CSS

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

jQuery 效果、动画和 CSS

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。