how to make the external div invisible (Hidden), but its interior visible?

Question

http://jsfiddle.net/wf9ghbc7/

Javascript

I’m making a game of randomly drawing numbers: I’d like to do something like a slot game. That is, only one number should appear inside a div and the numbers outside should be invisible.

var array = [1,2,3,4,5,6,7,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,10,11,12,13,9,10,11,12,13,14,15,14,15];
var contador = 1;
var novoTopo = array.length * 200 * -1;
$('#valores').css({top: + novoTopo});
for(var i =0;i<array.length;i++){
    $("#valores").append("<div id='result"+contador+"' classs='name'>"+array[i]+"</div>");
    contador++;
}

<div id="valores">

</div>

Answer 1

For you to get this result, your div id="valores", that has animation and contains the other numbers of the "game" must be inside another div, for you to make the layout control on it, since it will be a fixed div.

In order for it to have the expected behavior, you must set the parameters of width, height and overflow, for example:

.valores_wrap {
    position:relative;
    width:100px;
    height:60px;
    overflow:hidden;
}

The overflow property, which defines the scroll of the div, when defined as hidden will disable the div scroll and prevent anything "outside" of it from appearing in the layout. With this you can get the expected result.

Look at this example I made with your fiddle: http://jsfiddle.net/wf9ghbc7/10/

Obs.: I modified a value in your JS because he was shifting the game number 10px down.