CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bhavik Joshi
Bhavik Joshi

Reputation: 2677

How to animate the list?

This is my JSFiddle

As you can see from the fiddle that there is a list that is being scrolled with the help of arrows.. So what I want is to animate that transition when the list visible and hidden.

I don't know about the animation. I have seen many examples and tried to adjust them with my example but it's not working... How do I get the list to animate?

$(document).ready(function(){
    var code='';
    for(var i=1;i<=20;i++)
    {
        code+="<li>list Item "+i+"</li>";
    }
    $('#list-items').html(code);        
        
});


var list_items = [];
var index = 0;
var list_length = 0;

function getAllListItems() {
    var temp = document.getElementsByTagName('li');

    for (i = 0; i < temp.length; i++) {
        list_items.push(temp[i]);
    }

    list_length = temp.length;
}

getAllListItems();

function move(dir) {


    if (dir == left) {
        list_items[index].style.display = 'block';
        index--;

        if (index < 0) {
            index = 0;
        }
    } else if (dir == right) {

        list_items[index].style.display = 'none';

        if (index >= ((list_length) - 1)) {
            index = (list_length) - 1;
        } else {
            index++;
        }
    } else {}
}
* {
    box-sizing: border-box;
}
ul {
    float:left;
    height:50px;
    width: 600px;
    overflow: hidden;
}
ul li {
    text-align: center;
    border: 2px solid black;
    width: 100px;
    height: 50px;
    float: left;
    list-style-type: none;
    background-color: aquamarine;
}
ul li:first-child {
    display: block;
}
#left, #right {
    float:left;
    height:50px;
    background-color:aqua;
    font-size:2em;
    padding-left: 20px;
    padding-right:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload='getAllListItems()'>
    <div id='t'></div>
    <button id='left' onClick="move(left)">
        <</button>
           
                <ul id='list-items'>
                    
                </ul>
         
            <button id='right' onClick='move(right)'>></button>
</body>

Upvotes: 6

Views: 214

Answers (1)

Steve K
Steve K

Reputation: 4921

You can easily just replace your lines:

list_items[index].style.display = 'block';
list_items[index].style.display = 'none';

with the jQuery show() and hide() functions:

$(list_items[index]).show("slow");
$(list_items[index]).hide("slow");

As demonstrated in my updated version of your Fiddle

For different transitions, you can use the animate() function, which lets you tell it what css properties to affect. In addition to numeric values, jQuery also supports the special values 'show', 'hide', and 'toggle' (which, incidentally, will show, hide, or toggle the show/hide status of an element using that property). So for instance, if you wanted to shrink them only horizontally and leave the vertical alone, you could change the .show() and .hide() calls to:

$(list_items[index]).animate({width:'show'}, 600);
$(list_items[index]).animate({width:'hide'}, 600);

I've demonstrated this in another updated Fiddle

Upvotes: 9

Related Questions