I attempted to customize this jQuery slider solution from Stack Overflow: (using the first solution - http://jsfiddle.net/sg3s/rs2QK/).
Check out my modified version on jsFiddle here: http://jsfiddle.net/markrummel/KSHSX/.
The slide-in effect for the DIV element works smoothly, but the one being slid out abruptly disappears instead of sliding out at the same pace. I have made adjustments by removing .hide() in the JavaScript and overflow:hidden in the CSS to observe the movement of the sliding-out DIV.
This is my first experience using the .animate() function, so any guidance you can provide would be highly appreciated!
Below is the JavaScript code snippet:
$('.date-nav-prev').click(function () {
$('.date-nav-next').show();
var current = $('.visible-actions');
var prev = current.prev('.user-actions');
current.removeClass('visible-actions').animate({
left: current.width()
}, 500, function() {
//current.hide();
});
prev.addClass('visible-actions').show().css({
left: -(prev.width())
}).animate({
left: 0
}, 500);
});
$('.date-nav-next').click(function () {
var current = $('.visible-actions');
var next = current.next('.user-actions');
current.removeClass('visible-actions').animate({
left: -(current.width())
}, 500, function() {
//current.hide();
});
next.addClass('visible-actions').show().css({
left: prev.width()
}).animate({
left: 0
}, 500);
});
Here is the HTML content:
<button class="date-nav-prev">< Prev</button>
<button class="date-nav-next">Next ></button><br />
<div id="wrapper">
<div class="user-actions daysAgo2">
Actions from 2 Days Ago</div>
<div class="user-actions yesterday">
Yesterday's Actions</div>
<div class="user-actions today visible-actions">
Today's Actions</div>
</div>
CSS styling:
.user-actions.yesterday, .user-actions.daysAgo2, .date-nav-next {display:none;}
#wrapper{width:250px; height:300px; border:1px solid #333;position:relative; float:left;
/*overflow:hidden;*/
}
.user-actions {width:100%; height:100%; position:relative; float:left; overflow:hidden; margin:0;}
.today {background:green;}
.yesterday {background:yellow;}
.daysAgo2 {background:orange;}