Эффект jQuery, анимация и CSS - PullRequest
Новая
       27

Эффект jQuery, анимация и CSS

1 голос
/ 25 мая 2011

Я пытаюсь получить эффект плавного анимации 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, очень ценю помощь.

Ответы [ 3 ]

2 голосов
/ 25 мая 2011

Ваш вопрос очень похож на этот: jQuery.animate () только с классом css, без явных стилей

Или вы можете просто использовать этот плагин: http://code.google.com/p/jq-class-anim/

0 голосов
/ 25 мая 2011 
$("#element").hover(function(){
    $("#div")
    .animate({height: x + "px"}, 500);
    });

Не стесняйтесь увидеть его версию в недавнем проекте (сайт для взрослых), просто нажмите на поиск:

fuckedapps.com

0 голосов
/ 25 мая 2011

Вы можете сделать 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');


                });
            });
...