左にアニメートすると要素が移動しない

ホバーで、上の画像を移動してその下に画像を表示したい左と右の値は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

元の回答で提供された2番目の例を確認してください –

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

一つの問題は、同じIDを持つ複数の要素を持っているということです。 IDは一意の識別子です。代わりにクラスを使用することもできます。

this fiddleでは、私はを削除し、underをIDからクラスに2回使用するように変更しました。

アニメーションが動作します。これが望ましい結果でない場合は、以下にコメントしてください。

出典

2016-05-12 12:00:18 Siavas

こんにちは、あなたのソリューションは私がやりたいことをやっているだけです。私の残っているコードは良くないし、ホバーするたびに左に100を加えてDOMを破り始めます。助けてくれてありがとう！ – SubjectX

左にアニメートすると要素が移動しない

答えて

関連する問題