CODEWITHSUNDEEP
jquerycssjquery-animate
Justin Elkow
Justin Elkow

Reputation: 2943

Make a DIV slowly move offscreen

I want to create a scoreboard where recent winners are listed. When a new winner is announced, I want the three current winners to slide right, the new winner to slide from the left into place and the oldest winner (rightmost) to slide off screen.

With the code below, I have everything working except for the right side. Right now, it just disappears (I want it to slide off the right side gracefully).

HTML

<div id="results-wrapper">
    <div class="contest-results" id="recent-winners">Recent winners:</div>
    <div class="contest-results" id="winner-wrapper">
        <div class="winner">John</div>
        <div class="winner">Katie</div>
        <div class="winner">Peter</div>
    </div>
</div>

CSS

#results-wrapper {
    display:inline-block;
    padding: 6px 3px 4px 3px;
    font-size: 16px;
}
.contest-results {
    float:left;
}
#recent-winners {
    width: 120px;
    text-align: left;
}
#winner-wrapper {
    width: 444px;
    height: 20px;
    white-space: nowrap;
    overflow: hidden;
}
.winner {
    text-align: center;
    width: 148px;
    float:left;
    position: relative;
    display: inline;
}

JS

$("#winner-wrapper").on("click", ".winner", function() {
    $('.winner:first').before('<div style="display: none;" class="winner">justin</div>');
    $('.winner').css({"display" : "inline", "left" : "-148px"});
    $('.winner').animate({"left" : "0px"}, {duration : 600, easing : "swing"});
    $('.winner:last').remove();
});

Upvotes: 3

Views: 2247

Answers (2)

Ruben Infante
Ruben Infante

Reputation: 3135

The main issue here is that using float: left essentially negates the effects of white-space: nowrap.

As stated in the entry for float from MDN:

As float implicitly implies the use of the block layout, it modifies the computed value of the display values in some cases

To perform the function you desire, first change the CSS property for winner to remove float and have display: inline-block.

.winner {
    text-align: center;
    width: 148px;
    position: relative;
    display: inline-block;
}

Then modify the JavaScript to also deal with inline-block and remove the last winner only after the sliding animation is complete.

$("#winner-wrapper").on("click", ".winner", function () {
    var first = $(".winner").first();
    var last = $(".winner").last();
    first.before('<div style="display: none;" class="winner">justin</div>');
    $('.winner').css({
        "display": "inline-block",
        "left": "-148px"
    });
    $('.winner').animate({
        "left": "0px"
    }, {
        duration: 600,
        easing: "swing",
        complete: function () {
            last.remove();
        }
    });
});

DEMO

ALTERNATE DEMO (with additional behaviors)

Upvotes: 1

mabdrabo
mabdrabo

Reputation: 1060

<!DOCTYPE html>
<html>
<head>
  <style>
div {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>

<script>
$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
});

$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});

</script>

</body>
</html>

copied directly from http://api.jquery.com/animate/

50px is the distance that will be moved slow is the speed (slow, medium, fast or you can enter a number of milliseconds)

Upvotes: 1

Related Questions