jQuery效果，動畫和CSS

我想讓你在鼠標懸停的情況下獲得一個平滑的jQuery動畫效果（展開平滑與動畫一樣的淡入/淡出效果）。jQuery效果，動畫和CSS

我已經在下面的代碼中使用了綠色圖層上的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的新手，非常感謝。

來源

2011-05-25 Sanket

你提的問題是非常類似於此：jQuery.animate() with css class only, without explicit styles

或者你可以簡單地使用這個插件：http://code.google.com/p/jq-class-anim/

來源

2011-05-25 11:14:28 silex

那jq-class-anim插件是死的。偉大的發現！ – Kieron 2011-05-25 13:30: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'); 


       }); 
      });

來源

2011-05-25 11:24:01 abhijit

lyk？真？你的意思是'喜歡'嗎？ – 2011-05-25 13:23:53

是丹尼爾'喜歡'我的意思..如果你覺得難以理解 – abhijit 2011-05-25 14:30:42

jQuery效果，動畫和CSS

回答

相關問題