左側動畫不會移動元素

在懸停時，我想移動頂部圖片以顯示其下的圖片。左值和右值在DOM中發生變化，但視覺圖片不會移動。左側動畫不會移動元素

$(document).ready(function(){ 
 
\t var left = $('#left').offset().left; 
 
\t var right = $('#right').offset().right; 
 
\t $("#left").hover(
 
\t \t function(){ 
 
\t \t \t $("#right #top").css({right:right}).animate({"right": "+=100px"},"slow"); 
 
\t \t 
 
\t \t }, 
 
\t \t function(){ 
 
\t \t \t $("#right #top").css({right:right}).animate({"right": "-=100px"},"slow"); 
 
\t \t }); 
 
\t 
 
\t $("#right").hover(
 
\t \t function(){ 
 
\t \t \t $("#left #top").css({left:left}).animate({"left": "-=100px"},"slow"); 
 
\t \t 
 
\t \t }, 
 
\t \t function(){ 
 
\t \t \t $("#left #top").css({left:left}).animate({"left": "+=100px"},"slow"); 
 
\t \t }); 
 
});

html,body,#wrapper{ 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
#wrapper { 
 
    align-items: center; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
#center{ 
 
\t width: 800px; 
 
\t text-align:center; 
 
\t position:relative; 
 
} 
 

 
img{ 
 
\t width:100%; 
 
\t height:auto; 
 
\t float:left; 
 
} 
 

 
#left{ 
 
\t width:400px; 
 
\t float:left; 
 
\t position:absolute; 
 
} 
 

 
#right{ 
 
\t width:400px; 
 
\t float:right; 
 
} 
 

 
#top{ 
 
\t z-index:1; 
 
} 
 

 
#under{ 
 
    z-index:-1; 
 
    float: none; 
 
    height: auto; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 400px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <link rel="stylesheet" href="css/style1.css"> \t 
 
\t \t <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
 
\t \t <script type="text/javascript" src="js/script.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="wrapper"> 
 
\t \t \t <div id="center"> 
 
\t \t \t \t <div id="left"> 
 
\t \t \t \t \t <img src="http://s32.postimg.org/p5mgljj5x/drums_left.jpg" id="top"> 
 
\t \t \t \t \t <img src="http://s32.postimg.org/4vp56ei11/workout_left.jpg" id="under"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="right"> 
 
\t \t \t \t \t <img src="http://s32.postimg.org/6ep4p4dz9/drums_right.jpg" id="under"> 
 
\t \t \t \t \t <img src="http://s32.postimg.org/mzs5r1fph/workout_right.jpg" id="top"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body> 
 
\t 
 
\t <footer> 
 
\t </footer> 
 
</html>

我想有一個在CSS position屬性的使用有問題？

和小提琴是這樣的：https://jsfiddle.net/bjgydLvo/4/

來源

2016-05-12 SubjectX

您可能會更好地嘗試使用CSS動畫來執行此操作 – Andrew

您能指出我朝着正確的方向嗎？ – SubjectX

類的運動圖像，並添加以下CSS

.animate{ 
    left:0; 
    transition:all .2s; 
    position:relative; 
}

jQuery的

$('#center').mouseenter(function(){ 
    $('.animate').css('left','-100%') 
}) 
$('#center').mouseleave(function(){ 
    $('.animate').css('left','0') 
})

例 https://jsfiddle.net/8fbohssn/1/

如果你想隱藏滑動的圖像，因爲它留下只需添加overflow:hidden;到父容器

示例 https://jsfiddle.net/8fbohssn/2/

來源

2016-05-12 12:07:48

這解決了我的問題，謝謝！有沒有簡單的方法來隱藏div背後的滑動圖像？所以當它滑動時，它會消失在「白色背景」之後？ – SubjectX

檢查我原來的答案中提供的第二個例子 –

https://i.imgur.com/XJyemeI.jpg – SubjectX

的一個問題是，你必須具有相同ID的多個元素。 ID是唯一標識符 - 您可能希望使用類來代替。

在this fiddle中，我刪除了#top，並將under從ID更改爲class，因爲您正在使用它兩次。

動畫現在可以運作。如果這不是理想的結果，請在下面評論。

來源

2016-05-12 12:00:18 Siavas

嗨，你的解決方案開始做我想做的事情，只是我剩下的代碼不好，它開始打破DOM，每次我懸停時都向左邊加100。謝謝你的幫助！ – SubjectX

左側動畫不會移動元素

回答

相關問題