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

Question

我想使用jQuery从右向左滑动一个隐藏的(display:none) div块。当用户将鼠标悬停在此区块上时，它应该会出现。代码如下：

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

这段代码运行良好，但它是从左向右滑动的，我希望它从右向左滑动。我怎么才能“逆转”它呢？

Answer 1

动画使元素的width发生变化，当它以通常的方式定位时，它会缩小到左侧(这样想一想:如果它获得50%的width，那么你的块会在哪里结束？)您可以用另一种方式定位div，比如使用float: right;，在这种情况下，它将缩小到右侧。

下面是一个说明这一点的代码片段：

​

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>

​