Question

I am new to jquery and trying to build a full page responsive slider. It is working fine except that I want different things to happen at each slide / percent value. All of my slides are in ‘slider’ and are 100% width, so:

slide 1 – (is visible when) ‘slider’ left 0
slide 2 – ‘slider’ left -100percent
slide 3 – ‘slider’ left -200percent
and so on

The first if statement works fine but the second has no effect, I have also tried ‘position’ instead of ‘offset’

$('#next').click(function(){
    $('#slider').animate({'left': '-=100%'},
        function() {
            var pos = $('#slider').offset();
            if (pos.left < 0) {
                $('#div1').show();
                } 
            else if (pos.left == '-700%') {
                $('#div1').hide();
                } 
     });    
});

Any help is much appreciated! Thank you.

Answer 1

offset() is normalized by jQuery to always return px values; regardless of what CSS you have applied to the element.

The top and left values are numbers, not strings, FYI.