JQuery fadeIn（）將其他CSS元素移動到fadeIn（）

我剛剛學習了一些jQuery來獲取基礎圖像庫，該基礎圖像庫位於我爲酒店創建的網站上，但目前還沒有計劃。我已經掌握了它，所以箭頭會循環顯示圖像（沒有動畫），但是我決定當圖像懸停時淡入淡出，而不淡入淡出，但是這會讓CSS變得混亂起來。在jQuery的準備的start（）函數$('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0);JQuery fadeIn（）將其他CSS元素移動到fadeIn（）

：

箭頭開始通過調用淡出。

這很好，但是當您將鼠標懸停在圖像上並且箭頭淡入時，圖像會向右移動，我不知道爲什麼。我想這可能是因爲左箭頭現在衰落意味着它是過得去就推過，但箭頭具有以下CSS：

position:relative; 
top: -90px; 
left: 25px;

應該相對元素能夠改變一個正常的元素的位置？

如果您需要嘗試一下，只需將鼠標懸停在大型（佔位符）圖像上，當箭頭淡入時圖像會跳過並在淡出時跳回。

任何想法爲什麼會發生這種情況？我是一個jQuery noob。

這裏是一個網頁的鏈接：BeanSheaf Hotel Temporary Space

感謝您的時間，

InfinitiFizz

來源

2010-05-11 Infiniti Fizz

你可能要檢查出[jQuery的週期插件]（http://jquery.malsup.com/cycle /）。 – 2010-05-11 21:46:30

謝謝大家的意見和感謝，告訴我我需要學習多少:) 它現在使用的建議基本上每個人都說，使容器相對和箭頭絕對。現在我只需要解決如何在使用replaceWith（）之後繼承事件。謝謝大家。 – 2010-05-12 17:43:47

還有一個問題對不起，我現在更新了頁面（更改了fund.css中的CSS和gallery.js中的一些jQuery，以便在庫中的圖像發生更改時委派事件）。懸停在完美的元素方面不會跳躍，但我現在的問題是，箭頭將在hoverOut上方和下方的#imageContainer中淡出，但不會在其左側或右側淡出。此外，arrowRight的淡入和淡出似乎正在搞亂Internet Explorer的渲染，但是arrowLeft看起來很好，有什麼想法？對不起，如果我應該問一個新的問題。謝謝 – 2010-05-12 18:07:14

#imageContainer應該有：position:relative

arrowLeft應該有：

position:absolute; 
top:90px; 
left:5px;

相對定位元素佔用空間佈局。由於你的箭頭相對定位，當它們出現時，它們會碰撞四周。

爲了定位事情，所以這不會發生，圖像的「頂部」項目需要絕對定位。這意味着它們不再是佈局流程的一部分，而是在其之上。

絕對定位的項目需要一個原點（0,0）的參考點。這些項目查看它們的包裝器，然後沿着HTML樹找到第一個相對定位的元素，以確定它們的原點。如果沒有，則使用<body>作爲參考點。

因爲我們將position:relative添加到imageContainer，容器現在成爲參考點，允許您使用top:和left:準確定位箭頭。

來源

2010-05-11 21:27:43

它看起來像圖像周圍的超級鏈接什麼是推動一切正確的，當它消失請嘗試將樣式應用於該對象而不是圖像本身。

如果你不使用它，我會建議獲得螢火蟲，使得確定事情發生的原因要容易得多。

編輯：其實它不僅僅是這樣。相對於imageContainer投擲位置，並使超鏈接位置爲絕對位置。

來源

2010-05-11 21:26:39 Bela

因爲fadeOut()方法將none分配給元素的display屬性。
嘗試將目標元素的position更改爲absolute，其中包含relative定位的元素。

.fadeOut()方法動畫匹配元素的不透明度。一旦不透明度達到0，顯示樣式屬性設置爲無，因此該元素不再影響頁面的佈局。
- API Documentation

來源

2010-05-11 21:29:26 sepehr

你做的都是錯誤的傢伙:)你需要這樣做：

1）position:relative爲#imageContainer

2）position:absolute爲arrorLeft和arrowRight父母（這樣的鏈接）並嘗試與left和top一起玩。

完成這一步之後，你不會有網頁上有跳躍的東西任何問題:)

來源

2010-05-11 21:31:28

JQuery fadeIn（）將其他CSS元素移動到fadeIn（）

回答

相關問題