アニメーションの幅をjQueryの右から左に切り替える

Question

jQueryを使用して非表示の（display:none）divブロックを右から左にスライドしたいとします。ユーザーがこのブロックを移動すると表示されます。ここでは、コードです：

$('.wrapper').hover(function() { 
    $(this).children('.item').stop(true, true).animate({width:'toggle'}, 400); 
}); 

このコードは正常に動作しますが、それは左から右にスライドし、私はそれが右から左にスライドします。それをどうやって逆転できますか？

Answer 1

要素のアニメーションが変更され、通常の方法で配置されている場合、左側に収縮します（このように考える：50％widthを取得した場合、ブロックはどこに終了しますか？） 。 divを別の方法、たとえばfloat: right;で配置することができます。この場合、右側に縮小されます。

window.toggle = function() { 
 
\t jQuery(".toggledOne, .toggledAnother").stop(true, true).animate({width:'toggle'}, 400); 
 
}

.wrapper, 
 
.toggledOne, 
 
.toggledAnother { 
 
    width: 100%; 
 
} 
 

 
.wrapper { 
 
    height: 2em; 
 
} 
 
.toggledOne, 
 
.toggledAnother { 
 
    height: 1em; 
 
} 
 
.toggledOne { 
 
    background-color: red; 
 
} 
 

 
.toggledAnother { 
 
    float: right; 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<a onclick="window.toggle();">click me</a> 
 
<div class="wrapper"> 
 
    <div class="toggledOne"></div> 
 
    <div class="toggledAnother"></div> 
 
</div>