CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
Robson
Robson

Reputation: 1277

Bootstrap tab content slide left out and slide right in effect

I'm working on bootstrap layout, and I have nav pills and tabs content, I would like to create slide left out and slide right in tab content on change the tab.

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {    
        var target = $(this).attr('href');  

  $(target).animate({"left":"-9999px"}, "2000").animate({"left":"0px"}, "2000");
    })

This code works, but the tab content isn't sliding to the left 100%, some content is still visible. How I can do that the tab content will slide to the left all, change, and slide to right.

Thanks a lot!

Upvotes: 1

Views: 1592

Answers (1)

iurii
iurii

Reputation: 4230

maybe smth like this will work for you

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(this).attr('href');

  $(target).css('position', 'relative'); // you need position relative in order to apply 'left' 
  $(target).animate({"left":"-2500px"}, 2000).animate({"left":"0"}, 2000);
});

Upvotes: 1

Related Questions