在jQuery中从右到左的动画宽度切换

Question

I want to slide a hidden ( display:none ) div block from right to left using jQuery. It should appear when a user hovers on this block. Here's code:

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

This code works fine, but it slides from left to right, and I want it to slide from right to left. How can I 'reverse' it?

Answer 1

The animation makes width of the element change and when it is positioned in a usual manner, it gets shrinked to the left side (think of it this way: where will your block end up if it get 50% width ?). You can position the div in another way, say with float: right; and in this case it will be shrinked to the right side.

Here's a snippet that illustrates this:

 window.toggle = function() { 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>