как скрыть предыдущий при отображении следующего с помощью jquery?

0

Я не нахожу вертикальный скроллер новостей для joomla 2.5. Поэтому я хотел сделать свой собственный.

Во-первых, я скрыл первые два списка, а затем я хотел показать следующий список при нажатии, но я делаю неправильно

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

вот демонстрация

Я также хотел показать следующий список и скрыть предыдущий первый список. Как я могу сделать?

редактировать

Хорошо, теперь я сделал работу, как использование этой демонстрации

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

Теперь, как я могу скрыть предыдущий, показывая следующий?

  • 0
    Что именно ты пытаешься сделать? Этот код действительно странный ...
  • 0
    при нажатии вверх вверх должен отображаться следующий li, а предыдущий должен отображаться первым
Показать ещё 2 комментария
Теги:

4 ответа

1
Лучший ответ

Попробуй это,

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();    
    }
});

скрипка

Для понижения

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

Обновленный скрипт

Обновленный код с анимацией

$('#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);
    }
});

Анимированная скрипка

Поделиться
  • 0
    Большое спасибо.
  • 0
    @ C-Link, вы можете использовать fadeIn() для этого, см. Демонстрацию jsfiddle.net/UtEyf/7 Прочитать документы fadeIn api.jquery.com/fadeIn
Показать ещё 6 комментариев
1

Как насчет этого

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. скрипка

Поделиться
0

Вы должны дать сценарий, как это

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

         });    

        })
Поделиться
0

Там очень хорошая реализация такого поведения в jQueryUi с именем Accordion - попробуйте его использовать (или просто проверьте источник как основу для ваших конкретных потребностей)

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню