0

I am trying to animate this jquery tab, but nothing happening, maybe you know the answer?

I tried to use css transition on "this" block and fadeIn/fadeOut animation, but console always says me "$fadeIn(...) is not a function."

$(document).ready(function(){
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })
})

full codepen sameple here

Morlo Mbakop
  • 3,518
  • 20
  • 21
Амыр Челоков
  • 33
  • 4
  • 1
    Share your code here with codepen or jsfiddle – Mr. Perfectionist Aug 15 '19 at 09:23
  • The full content of your question must be in your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Please put a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) **in** the question, ideally using Stack Snippets (the `<>` toolbar button) to make it runnable ([here's how to create one](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-do-a-runnable-example-with-stack-snippets-how-do-i-do-tha)). – Rory McCrossan Aug 15 '19 at 09:24
  • https://codepen.io/cssjockey/pen/jGzuK – Амыр Челоков Aug 15 '19 at 09:25
  • 3
    That codepen doesn't have any animation function calls in it, nor does it show the error you describe – Rory McCrossan Aug 15 '19 at 09:26
  • Where are you using fadeIn? – Mr. Perfectionist Aug 15 '19 at 10:41

2 Answers2

0

From your codepen, you can animate your tab content with CSS. You can look at this previously asked question. Try this:

ul.tabs li {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
Morlo Mbakop
  • 3,518
  • 20
  • 21
0

You need to add transition rule to ul.tabs li and to use hide method on .tab-content.current and fadeIn method on tab-* elements (every one that's going to be shown after clicking a tab).

Here's a demo :

$(document).ready(function() {
  $('ul.tabs li').click(function() {
    var tab_id = $(this).attr('data-tab');
    $('ul.tabs li').removeClass('current');
    /** hide the currently shown content **/
    $('.tab-content.current').hide();
    $('.tab-content').removeClass('current');
    $(this).addClass('current');
    /** fade in the new tab content to be shown **/
    $("#" + tab_id).fadeIn('slow').addClass('current');
  });
});
body {
  margin-top: 100px;
  font-family: 'Trebuchet MS', serif;
  line-height: 1.6
}

.container {
  width: 800px;
  margin: 0 auto;
}

ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul.tabs li {
  background: none;
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
  /** aply transition when clicking on the tabs buttons **/
  transition: all .4s 0s ease;
}

ul.tabs li.current {
  background: #ededed;
  color: #222;
}

.tab-content {
  display: none;
  background: #ededed;
  padding: 15px;
}

.tab-content.current {
  display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Tab One</li>
    <li class="tab-link" data-tab="tab-2">Tab Two</li>
    <li class="tab-link" data-tab="tab-3">Tab Three</li>
    <li class="tab-link" data-tab="tab-4">Tab Four</li>
  </ul>
  <div id="tab-1" class="tab-content current">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div id="tab-2" class="tab-content">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="tab-3" class="tab-content">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>
  <div id="tab-4" class="tab-content">
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
ThS
  • 4,597
  • 2
  • 15
  • 27