Adding FadeIn/FadeOut to jQuery UI Tabs
I feel like I've tried everything, but I'm not sure how to make my tab transition fade content in and out... Here is my code..
- <script type="text/javascript">
- jQuery(document).ready(function ($) {
- $('.kb-home-sort').tabs();
- });
- </script>
And the HTML
- <div class="kb-home-sort">
-
- <ul class="kb-home-sort-nav">
- <li><a href="#tabCat">SORT BY CATEGORY</a></li>
- <li> | </li>
- <li><a href="#tabRecent">SORT BY MOST RECENT</a></li>
- </ul>
-
- <div id="tabCat">
- <!-- DISPLAY ALL KNOWLEDGE BASE POSTS, GROUP BY SECTION TAXONOMY -->
- <?php
- $categories = get_terms('section', 'orderby=name&order=DESC&hide_empty=1&exclude=60,59&showposts=5');
- foreach( $categories as $category ):
- ?>
- <h3 class="kb-cat-title"><?php echo $category->name; // Prints the cat/taxonomy group title ?></h3>
- <div class="kb-single-border"></div>
- <?php
- $posts = get_posts(array(
- 'post_type' => 'knowledgebase',
- 'taxonomy' => $category->taxonomy,
- 'term' => $category->slug,
- 'nopaging' => true,
- ));
- $count = 0;
- foreach($posts as $post): ?>
- <?php setup_postdata($post); //enables the_title(), the_content(), etc. without specifying a post ID
-
-
- if ($count == 0) { ?>
- <div class="kb-home-big">
- <?php if (has_post_thumbnail() ) {
- the_post_thumbnail('kb-home-thumb', array('class' => 'kb-home-thumb-small'));
- }?>
- <h2><?php the_title();?></h2>
- <span class="theExcerpt"><?php echo excerpt(8);?></span>
- <a class="link" href="<?php the_permalink();?>">Read More</a>
- </div>
- <?php } else { ?>
- <div class="kb-home-list">
- <h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2>
- </div>
- <?php } ?>
- <?php $count ++; endforeach; ?>
- <div class="clear"></div>
- <?php endforeach; ?>
- </div>
- <div id="tabRecent">
- <!-- DISPLAY ALL KNOWLEDGE BASE POSTS, BY DATE OFFSET FIRST 7 DISPLAYED IN MULTI-COLUMN LAYOUT -->
- <ul class="post-list">
- <?php query_posts('post_type=knowledgebase&showposts=10&offset=7&orderby=date'); ?>
- <?php while (have_posts()) : the_post(); ?>
- <li>
- <div class="post-list-item">
- <?php if (has_post_thumbnail() ) {
- the_post_thumbnail('kb-home-thumb', array('class' => 'kb-home-thumb-small'));
- }?>
- <span class="theDate">
- <?php the_time('F j, Y');?>
- </span>
- <div class="details">
- <?php echo my_get_the_term_list( $post->ID, 'section', '', ', ', '', array(60) ); ?>
- </div>
- <h2><?php the_title();?></h2>
- <div class="theExcerpt">
- <?php echo excerpt(34);?>
- </div>
- <a class="link" href="<?php the_permalink();?>">Read More</a>
- </div>
- </li>
- <?php endwhile;?>
- </ul>
- </div>
- </div>