CODEWITHSUNDEEP
jquery
devnull Ψ
devnull Ψ

Reputation: 4029

Animate width toggle from right to left in jQuery

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?

Upvotes: 0

Views: 3367

Answers (1)

YakovL
YakovL

Reputation: 8316

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>

Upvotes: 3

Related Questions