如何隱藏前一個顯示下一個與jQuery的？

~~我沒有找到joomla 2.5的垂直新聞滾動器所以我想做我自己的。~~如何隱藏前一個顯示下一個與jQuery的？

首先，我已經隱藏在前兩個列表，然後我想在單擊時，顯示下一個列表，但我做錯了

$('ul li').slice(2).hide(); $('#up').on('click',function(){ $('ul li').slice(3).hide(); });

here is the demo

~~我也想顯示下一個列表和隱藏先前的第一個列表我能怎麼做？~~

編輯

好了，現在我已經喜歡使用這種demo

var countnews = 3; 
$('ul li').slice(countnews).hide(); 
$('#up').on('click',function(){ 
    $('ul li').show();  
    $('ul li').slice(countnews++).hide(); 
});

現在的工作，我怎麼可以隱藏前一個顯示下一個是什麼時候？

來源

2013-10-03 Bhojendra Nepal

究竟是你想做些什麼？這個代碼真的很奇怪... – Itay

當點擊下一個li應該被顯示，並且以前顯示的第一個應該隱藏 –

而且你想它總是顯示3個項目？ – Itay

試試這個，

var start = 0; 
var end = 3; 
var len=$('li').length; 
$('ul li').hide().slice(start, end).show(); 
$('#up').on('click',function(){ 
    if(end<len) 
    { 
     start++;end++; 
     $('ul li').hide().slice(start, end).show();  
    } 
});

Fiddle

對於下來

$('#down').on('click',function(){ 
    if(start>0) 
    { 
     start--;end--; 
     $('ul li').hide().slice(start, end).show();  
    } 
});

Updated Fiddle

更新代碼與動畫

$('#up').on('click',function(){ 
    if(end<len) 
    { 
     $('ul li').slice(start, end).slideUp(500); 
     start++;end++; 
     setTimeout(function(){ 
      $('ul li').hide().slice(start, end).slideDown(500); 
     },500); 

    } 
}); 
$('#down').on('click',function(){ 
    if(start>0) 
    { 
     $('ul li').slice(start, end).slideUp(500); 
     start--;end--; 
     setTimeout(function(){ 
      $('ul li').hide().slice(start, end).slideDown(500); 
     },500); 
    } 
});

Animated Fiddle

來源

2013-10-03 06:44:41

非常感謝。 –

@ C-Link你可以使用'fadeIn（）'來查看演示http://jsfiddle.net/UtEyf/7/ 閱讀淡入文檔http://api.jquery.com/fadeIn –

我想給滾動效果，所以我試着slideUp和slideDown，但沒有工作，並試圖slideToggle的作品，但它不是我想要的方式 –

如何this

var start = 0; 
var end = 2; 

$('ul li').hide().slice(start, end).show(); 
$('#up').on('click',function(){ 
    //$('ul li').show(); 
    start++;end++; 
    //alert(start) 
    $('ul li').hide().slice(start, end).show();  
});

更新小提琴既up和down工作。 Fiddle

來源

2013-10-03 06:40:38 bhb

有非常好的實現這樣的行爲在jQueryUI的命名Accordion的 - 嘗試使用它（或只是檢查源爲您的特定需求的基礎）

來源

2013-10-03 06:43:53 Moby04

你需要給這樣的腳本

$(document).ready(function(){  
     $('ul li').slice(3).hide(); 
     $("#up").click(function(){ 
      $('ul li').show(); 
      $('ul li').slice(0,3).hide() 
      //alert('dk'); 

     });  

     })

來源

2013-10-03 06:59:12

如何隱藏前一個顯示下一個與jQuery的？

回答

相關問題