CODEWITHSUNDEEP
jqueryhtmlcssanimationslider
Philip
Philip

Reputation: 7166

Jquery - Never ending slider, speed issue

I've made a never ending loop with headlines sliding from one side to another. And when the headline reach the end it is put last in queue.

The problem is that my headlines are of different size in width. This ends with a slider that have different animation speeds. Maybe I'm wrong with my setup but this is my code:

HTML:

<header>
  <div id="spotlight">
    <span class="active">Foo</span>
    <span>Baaaar</span>
    <span>Baaz</span>
    <span>baz</span>
    <span>qux</span>
    <span>quux</span>
    <span>corge</span>
    <span>grault</span>
    <span>garply</span>
    <span>waldo</span>
  </div>
</header>

CSS:

body {
    background: #000;
}

header {
    border-bottom: 8px solid white;
    height: 300px;
    margin-bottom: 4%;
    overflow: hidden;
    position: relative;
}
header #spotlight {
    left: 0;
    position: absolute;
    width: 1100%;
}
header #spotlight span {
    color: white;
    display: block;
    float: left;
    font-size: 6em;
    font-weight: 900;
    margin-top: 1%;
    text-transform: uppercase;
}
header #spotlight span {
    margin-left: 30px;
}
header #spotlight span:not(:last-child):after {
    content: "•";
    margin-left: 30px;
}

JS:

$(window).load(function(){
        animate_spotlight();
});

function animate_spotlight(){
    var $current_spot = $('#spotlight span.active')
    var pos = $current_spot.next().position().left;
    $('#spotlight').stop().animate({
        left : '-' + pos + 'px'
    }, {easing : 'linear', duration : 3000, complete : function(){
        $current_spot.next().addClass('active'); // Fetch new object
        $current_spot.appendTo('#spotlight'); // Put the old object last in #spotlight elem.
        $('#spotlight').css({left : 0 + 'px'}) // Reset the position
        $current_spot.removeClass('active'); // Removes active class of the old elem.
        animate_spotlight(); // Loop
    }});
}

JS FIDDLE http://jsfiddle.net/7BMaF/2/

Upvotes: 3

Views: 582

Answers (2)

user2985029
user2985029

Reputation:

Find a way to vary the duration. In this case I divided the width of each span by 1000 and then multiplied it by the duration, in this case 8000

http://jsfiddle.net/axrwkr/7BMaF/4

function animate_spotlight(){
    var $current_spot = $('#spotlight span.active')
    var pos = $current_spot.next().position().left;

   var wid = $current_spot.width();
   var dur = (wid / 1000) * 8000;

    $('#spotlight').stop().animate({
        left : '-' + pos + 'px'
    }, {easing : 'linear', duration : dur, complete : function(){
    $current_spot.next().addClass('active');
    $current_spot.appendTo('#spotlight');
    $('#spotlight').css({left : 0 + 'px'})
    $current_spot.removeClass('active');
    animate_spotlight();
    }});
}

Upvotes: 1

Philip
Philip

Reputation: 7166

I fixed this by adding a variable and used it as source for calculating speed.

var divide_to_get_time = (pos / 10000) * 50000;

And then put that variable in the duration.

Final code:

function animate_spotlight(){
    var $current_spot = $('#spotlight span.active')
    var pos = $current_spot.next().position().left;

    var divide_to_get_time = (pos / 10000) * 50000;

    $('#spotlight').stop().animate({
        left : '-' + pos + 'px'
    }, {easing : 'linear', duration : divide_to_get_time, complete : function(){
        $current_spot.next().addClass('active');
        $current_spot.appendTo('#spotlight');
        $('#spotlight').css({left : 0 + 'px'})
        $current_spot.removeClass('active');
        animate_spotlight();
    }});
}

Upvotes: 1

Related Questions