左侧动画不会移动元素

在悬停时，我想移动顶部图片以显示其下的图片。左值和右值在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

左侧动画不会移动元素

回答

相关问题