7
यह मेरा JSFiddleसूची को एनिमेट कैसे करें?
आप बेला से देख सकते हैं कि वहाँ एक सूची है कि तीर की मदद से स्क्रॉल किया जा रहा है कि .. तो क्या मैं चाहता हूँ कि संक्रमण चेतन करने के लिए है जब सूची दिखाई और छिपा।
मुझे एनीमेशन के बारे में पता नहीं है। मैंने कई उदाहरण देखे हैं और उन्हें मेरे उदाहरण के साथ समायोजित करने की कोशिश की है लेकिन यह काम नहीं कर रहा है ... मैं सूची को एनिमेट करने के लिए कैसे प्राप्त करूं? jQuery show() और hide() कार्यों के साथ
list_items[index].style.display = 'block';
list_items[index].style.display = 'none';
:
$(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>
अच्छा प्रश्न में यह प्रदर्शन किया है मैं सूची में एनीमेशन के बारे में भी जानना चाहते हैं..और कैरोसेल मेनू के लिए अच्छा तर्क .. मैंने यह पहली बार देखा है –
@ सांड्यागोर धन्यवाद। –
इसके लिए बहुत सारी पुस्तकालय हैं। स्मृति द्वारा एक: Slick; इसे आज़माएं http://kenwheeler.github.io/slick/ – Carlos2W