jQuery .animate() for simple horizontal slider not working as intended

Question

I have tried to modify this jQuery slider solution: https://stackoverflow.com/a/9864636/908491 (using the first solution - http://jsfiddle.net/sg3s/rs2QK/).

Here is my jsFiddle: http://jsfiddle.net/markrummel/KSHSX/.

The DIV sliding in works just fine, but the one being slid out jumps away, instead of sliding out smoothly at the same rate as the DIV sliding in. I have commented out .hide() in the javascript and overflow:hidden in the CSS, so that I could see where the DIV being slid out goes.

This is my first time using .animate(), so any help you can offer is greatly appreciated!

Here is my javascript:

$('.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);
});

HTML:

<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:

.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;}

Marcel Gwerder · Accepted Answer · 2013-07-11T21:04:22.240

I simplyfied the whole thing a little bit just to show you in which direction it could go. In most of the plugins there is a wrapper box sliding left and right and not the actual boxes itself. That makes things a little easier.

Have a look at the DEMO.

I added a #slider div which slides left and right:

<button class="date-nav-prev">< Prev</button>
<button class="date-nav-next">Next ></button>
<div id="wrapper">
    <div id="slider">
        <div id="daysAgo2">Actions from 2 Days Ago</div>
        <div id="yesterday">Yesterday's Actions</div>
        <div id="today">Today's Actions</div>
    </div>
</div>

Set the wrapper to overflow:hidden; so everything that is past or before the current slide is hidden:

#wrapper{
    width:300px; 
    height:300px; 
    border:1px solid #333;
    position:relative; 
    overflow:hidden;
}
#slider {
    width: 1000px;
    height: 100%;
    position: absolute;
}
#slider div {
    width:300px; 
    height:100%; 
    float:left; 
}
#today{background:green;}
#yesterday {background:yellow;}
#daysAgo2 {background:orange;}

Just slide the slider left and right, thats it. Of course there are no limits in extending such sliders.

var sliderWidth = 300;
var slider = $('#slider');
var sliderCount = $('div', slider).length;
slider.width(sliderCount * sliderWidth);

$('.date-nav-prev').click(function () { 
    $('#slider').animate({left: '+='+sliderWidth}, 500);
});

$('.date-nav-next').click(function () {
    $('#slider').animate({left: '-='+sliderWidth}, 500);
});

Thanks! This sent me down the right path. I ended up floating it `right` instead of `left` and made some other modifications to suit my specific needs. Thanks again! — Mark Rummel, Jul 13 '13 at 18:47

score 0 · Answer 2 · answered Jul 11 '13 at 20:13

0

You can use use this plugin

$('#wrapper').cycle({
    fx:     'scrollHorz',
    prev:   '#prev',
    next:   '#next',
    timeout: 0
});

EXAMPLE HERE

answered Jul 11 '13 at 20:13

Khawer Zeshan

9,470
6
40
63

Thank you for your solution. This might ultimately be a good solution, I was just trying to do it without jQuery UI or a plugin. It is just a "simple" sliding effect, so I don't want a lot of extra code I'm not going to use. – Mark Rummel Jul 11 '13 at 20:31

jQuery .animate() for simple horizontal slider not working as intended

2 Answers2