浮動元素和使用jQuery

我有一個徽標的網格，5橫跨和4下。浮動元素和使用jQuery

當用戶點擊任何標誌時，標誌被推入網格並退出現場。一切都運行得非常順利，直到點擊第5個標誌。你可以在這裏嘗試一下：

如何糾正標識跳，當你點擊一個第五任何想法？

這裏是我的jQuery：

$(document).ready(function() { 

$('.imageShowing').click(function() { 

     if ($(':animated').length) { 
     return false; 
        } 
    $(this).animate({ 
    zIndex: '1', 
    height: '100', 
    width: '140', 
    marginTop: '14px', 
    marginLeft: '20px', 
    marginRight: '20px', 
    marginBottom: '14px', 
    }, 100, function() { 


    $(this).rotate({ angle:0,animateTo:90,easing: $.easing.easeInOutExpo }) 

    $(this).animate({ 
    zIndex: '1', 
    top: '480', 
    opacity: '0' 
    }, 1000, function() { 
    $(this).hide("fast"); 
    // Animation complete. 
    }); 
    }); 
}); 

}); //end document.ready

我的CSS：

#wrapper { width: 1000px; margin: 0 auto; height: 1000px; position: relative;} 
#grid {width: 935px; height: 531px; margin: 0 auto; background: url(images/grid.png) no-repeat center; padding:39px 4px 39px 11px; position: relative; z-index: 5;} 
#logoWrapper {position: absolute; top: 38px; left: 36px } 
#logoWrapper img { float: left; padding: 0 7px 6px 0; margin:0; position: relative; z-index: 6;} 

#bottom { height: 500px; width: 950px; background: #fff; margin: 0 auto; position: relative; z-index: 10;}

的HTML是非常簡單的。謝謝您的幫助。

來源

2012-04-13 Michael Rader

你使用什麼瀏覽器？我正在測試鉻18.0.1025.152米，它的工作原理。 – Jarry 2012-04-13 21:18:26

對我來說，它的工作原理是一樣的，你用什麼瀏覽器？ – riso 2012-04-13 21:19:38

它的作品，是的。問題是當你點擊右上角的那個，所有的標誌跳下來一秒鐘。 – idrumgood 2012-04-13 21:20:16

我會建議做一個無序的列表，因爲它會使你想做的事情變得更容易和語義上的目的。

然後，您可以相對定位您的<li>，並將它們中的圖像絕對定位。這種方式動畫圖像不會中斷網格的佈局。只需在結尾處隱藏<li>而不僅僅是圖像。

來源

2012-04-13 21:18:07 idrumgood

嗯，我會試試看看會發生什麼。 – 2012-04-13 21:55:05

謝謝！我做了它，我拿出了浮動和停止動畫。看起來好多了。 – 2012-04-13 22:26:27

在我的鉻一切運作良好，但在IE 7不工作，你的第一個動畫

$(this).animate({ 
    zIndex: '1', 
    height: '100', 
    width: '140', 
    marginTop: '14px', 
    marginLeft: '20px', 
    marginRight: '20px', 
    marginBottom: '14px', 
    }

刪除最後一個「」背後marginBottom，一些瀏覽器可能會想到另一個參數。

來源

2012-04-13 21:23:20 riso

謝謝你。但這並不能解決我目前的問題。 – 2012-04-13 21:55:46

浮動元素和使用jQuery

回答

相關問題