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, 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>

新來jquery，非常感謝。

來源

2011-05-25 Sanket

僅供參考 - 提供問題代碼的工作示例去** *得多*比發佈代碼更進一步尋求協助。如果您的網頁未公開，請使用jsfiddle.net之類的工具發佈代碼的相關部分。我這次爲你做了一個小提琴（http://jsfiddle.net/sqCN5/1/）。 :) – Dutchie432 2011-05-25 12:48:01

你必須描述最後的樣子！這個問題有點不清楚。 – 2011-05-25 12:48:55

@ Dutchie432 - 好的dutchie。是的。我也喜歡製作JSfiddles，但對於SO和他的未來來說，在這個地方粘貼代碼是有好處的。或者有一天...如果他們關閉JSFiddle ....所以會保持**空！**）） – 2011-05-25 12:52:41

刪除

top: '0', left: '0',

來自animate功能參數應用

，並刪除

, 'position': 'absolute'

從第一css功能paramteres

地址：

position:absolute;

到.box1和.box2 css類。

添加

z-index:10;

到.box1 CSS類

添加

top: 25px;  
z-index:0;

到.box2 CSS類

坐落在.box2

margin-top:0px;

防止搖晃。

這就是你想要的嗎？

檢查了這一點：

http://jsfiddle.net/M9JkP/4/

來源

2011-05-25 12:42:23

刪除（頂部：'0'，左：'0'，）正在工作正常，但第二個首先隱藏並隱藏 :(在瀏覽器中登記 – Sanket 2011-05-25 12:48:44

不知道我理解得很好，但如果你不喜歡它的下方，跨度元素不改變位置

$(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', marginLeft: '0px', width: '40px', height: '13px', padding: '0px' }, 700, 'swing'); 


       }); 
      });

來源

2011-05-25 12:44:20 Zeus

+1 GREAT！太好了！看起來像你讀心術！像 – 2011-05-25 12:54:27

刪除（上：'0'，左：'0'，）工作正常，但第二結束並隱藏第一個 :(在瀏覽器中檢查 – Sanket 2011-05-25 12:55:50

我刪除'位置'：'絕對'，看起來好些：

http://jsfiddle.net/gy7t9/

來源

2011-05-25 12:47:06

你做得很好，但

不應該動搖，這些綠色和橙色層應該覆蓋在桌子上 – Sanket2011-05-25 12:57:54

這就是當沒有準確地指定您的需求時會發生的情況;） – 2011-05-25 13:13:51

我玩弄了一下，得到了，我想是，基於它看起來你正在嘗試做的正確結果。我還製作了一個expandMenu()和collapseMenu() jQuery函數，以便使用$(this).expandMenu();輕鬆展開/摺疊。對於演示，我還將collapseMenu()調用添加到click()綁定，因此當點擊一個擴展項時，它會崩潰。

工作示例：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, Helvetica, 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', 
      height: '13px', 
      padding: '0px' 
     }, 700,'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', 
      height: '125px', 
      padding: '0px' 
     }, 700, 'swing'); 
    return ($(this));  
};

來源

2011-05-25 12:58:16 Dutchie432

相關問題

jquery動畫和CSS位置

回答

相關問題