jqueryで元の位置にアニメーション画像を戻す

Question

マウスを離すとイメージがアニメーション化され、マウスが離れる前に元の位置に戻すようにしています。ここで

は私のコードは、あなたがそれの現在の値に基づいて、プロパティをデクリメントする-=を使用することができます

$(document).ready(function(){ 
    $('.logo').mouseenter(function(){ 
     $('.logo').animate({left: "100px"}); 
    }); 

    $('.logo').mouseout(function(){ 
     $('.logo').animate({right: "100px"}); 

    }); 
}); 

Answer 1

です。 leftプロパティでこれを実行する必要があることに注意してください。rightは要素を含む要素の右側からの距離であり、設定する正しい値ではありません。また、コードをより簡潔にするには、hover()メソッドを使用します。これを試してみてください：

$('.logo').hover(function() { 
    $(this).animate({ left: "100px" }); 
}, function() { 
    $(this).animate({ left: "-=100px" }); 
}); 

はまた、あなたは、あなただけでは :hover疑似セレクタと transitionを使用してCSSに必要ものを達成できることに注意してください。

.logo { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid #C00; 
 
    position: absolute; 
 
    transition: left .25s; 
 
    left: 0; 
 
} 
 
.logo:hover { 
 
    left: 100px; 
 
}

<div class="logo">I am a logo!</div>

Answer 2

があなたのmouseenterイベントコールバックでleftキーワードを使用すると、逆方向への移動の同じサイズでリセットできることを、移動アニメーションの方向を示すのではなく、これを試してみてください要素のleft CSSプロパティの新しい値です。

あなたが元の値（おそらく0あなたの場合）にleft CSSプロパティをリセットする必要がありmouseoutオン：

$(document).ready(function(){ 
    $('.logo').mouseenter(function(){ 
     $('.logo').animate({left: "100px"}); 
    }); 

    $('.logo').mouseout(function(){ 
     $('.logo').animate({left: "0px"}); 
    }); 
}); 

しかし、ローリーは彼の答えに書いたように、あなたはJavaScriptを使用しなくても、このアニメーションを実現することができ、 CSSでのみ使用できます。