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?
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments