2

Estou usando um plugin de tab.js e para mudar de tab ele usa slideUp() e slideDown().

Só que eu gostaria de usar Left e Right. Como fazer?

Meu código:

$(document).ready(function() { 
(function ($) { 
    $('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
    $('.tab ul.tabs li a').click(function (g) { 
        var tab = $(this).closest('.tab'), 
            index = $(this).closest('li').index();  
            tab.find('ul.tabs > li').removeClass('current');
            $(this).closest('li').addClass('current');
            tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
            tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
        g.preventDefault();
    });
})(jQuery);

Link para o código usado: Codepen

1 Resposta 1

1

Aqui fica um exemplo de slide horizontal. Devo dizer que o slideUp() e slideDown() não permitem fazer o mesmo efeito na horizontal.

Isto é um exemplo que eu fiz, a semelhança com o seu código é usar-se o index do menu para ir buscar a div que se quer ver. Note também o HTML que tem um wrapper para os slides/tabs.

Não tive tempo de adaptar o seu código, mas se não compreender posso fazer isso amanhã.

$('#menu div').on('click', function () {
    var index = $(this).index();
    var largura = $('#wrapper').width();
    var aberta = $('#wrapper div.aberta');
    var clicada = $('#wrapper div').eq(index);

    if (clicada.hasClass('aberta')) return false;

    aberta.animate({
        'left': -largura
    }, 200, function () {
        $(this).removeClass('aberta').hide();
    });

    clicada.css('left', '300px').show().animate({
        'left': '0px'
    }, 200).addClass('aberta');

});

Exemplo

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .