I'm using foundation 4, specifically the foundation.section.js plugin. The issue is that I want to add jQuery effect when navigating through tabs, so that the content fades in smoothly, instead of just appearing there.

I've read that in order to use jQuery instead of zepto, I need to include the script file in the beginning of my .html, right after custom.modernizr.js which i did. Also after I initialize foundation I do the following:

$(document).foundation('data-section-title').click(function() {
    $(document).foundation('.active[data-section-region]').fadeIn("slow");
})

data-section-title is the data attribute for the title of the tab, while .active[data-section-region] is the active region selection (all these according to the foundation.section.js v4.1.3 code). I thought that something like my code above would work, but instead I get an Uncaught TypeError: Cannot use 'in' operator to search for 'display' in undefined.

Any ideas how I could make it work? Btw I'm using jQuery 1.9.1 and Zurb Foundation 4.1.6

I'm using foundation 4, specifically the foundation.section.js plugin. The issue is that I want to add jQuery effect when navigating through tabs, so that the content fades in smoothly, instead of just appearing there.

I've read that in order to use jQuery instead of zepto, I need to include the script file in the beginning of my .html, right after custom.modernizr.js which i did. Also after I initialize foundation I do the following:

$(document).foundation('data-section-title').click(function() {
    $(document).foundation('.active[data-section-region]').fadeIn("slow");
})

data-section-title is the data attribute for the title of the tab, while .active[data-section-region] is the active region selection (all these according to the foundation.section.js v4.1.3 code). I thought that something like my code above would work, but instead I get an Uncaught TypeError: Cannot use 'in' operator to search for 'display' in undefined.

Any ideas how I could make it work? Btw I'm using jQuery 1.9.1 and Zurb Foundation 4.1.6

• javascript
• jquery
• zurb-foundation

2 Answers 2

You can achieve your goal of fading in content without bringing in another library. Using the css below you can fade in the section content. An interesting note that I found while investigating this, since Foundation uses display:none / display:block to toggle the content you cannot use css transitions, animations on the other-hand do still work.

.section-container.tabs .content {
  display:block:important!
  opacity: 0; 
}
.section-container.tabs .active .content{
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  opacity: 1;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

Here is a working example. http://jsbin./eyazuf/2/edit

Did you remove/ment out this code? This script checks browser support for proto and determines whether it should load the zepto or jquery library

<script>
    document.write('<script src=' +
    ('__proto__' in {} ? '<your path here>/js/vendor/zepto' : '<your path here>/js/vendor/jquery') +
    '.js><\/script>')
</script>

Also, you do not need to use jquery to get fade in. you can do this with zepto.

$('.some-class').fadeIn('slow');

And if you are specifically looking to add jQuery fade in effect when navigating through tabs, you can modify the foundation.js file (or override it). Check out this Stack Overflow answer. Fade in tabs in Zurb Foundation