javascript - How to animate the list? -
this jsfiddle
as can see fiddle there list being scrolled of arrows.. want animate transition when list visible , hidden.
i don't know animation. have seen many examples , tried adjust them example it's not working... how list 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'); (i = 0; < 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>
you can replace lines:
list_items[index].style.display = 'block'; list_items[index].style.display = 'none'; with jquery show() , hide() functions:
$(list_items[index]).show("slow"); $(list_items[index]).hide("slow"); as demonstrated in updated version of fiddle
for different transitions, can use animate() function, lets tell css properties affect. in addition numeric values, jquery supports special values 'show', 'hide', , 'toggle' (which, incidentally, show, hide, or toggle show/hide status of element using property). instance, if wanted shrink them horizontally , leave vertical alone, change .show() , .hide() calls to:
$(list_items[index]).animate({width:'show'}, 600); $(list_items[index]).animate({width:'hide'}, 600); i've demonstrated in updated fiddle
Comments
Post a Comment