Adding FadeIn/FadeOut to jQuery UI Tabs

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..

  1. <script type="text/javascript">
  2. jQuery(document).ready(function ($) {
  3. $('.kb-home-sort').tabs();  
  4. });
  5. </script>
And the HTML

  1. <div class="kb-home-sort">
  2. <ul class="kb-home-sort-nav">
  3. <li><a href="#tabCat">SORT BY CATEGORY</a></li>
  4. <li>&nbsp;&nbsp; | &nbsp;&nbsp;</li>
  5. <li><a href="#tabRecent">SORT BY MOST RECENT</a></li>
  6. </ul>
  7. <div id="tabCat">
  8. <!-- DISPLAY ALL KNOWLEDGE BASE POSTS, GROUP BY SECTION TAXONOMY -->
  9. <?php 
  10. $categories = get_terms('section', 'orderby=name&order=DESC&hide_empty=1&exclude=60,59&showposts=5');
  11. foreach( $categories as $category ): 
  12. ?>
  13. <h3 class="kb-cat-title"><?php echo $category->name; // Prints the cat/taxonomy group title ?></h3>
  14. <div class="kb-single-border"></div>
  15. <?php
  16. $posts = get_posts(array(
  17. 'post_type' => 'knowledgebase',
  18. 'taxonomy' => $category->taxonomy,
  19. 'term' => $category->slug,
  20. 'nopaging' => true,
  21. ));
  22. $count = 0;
  23. foreach($posts as $post): ?>

  24. <?php setup_postdata($post); //enables the_title(), the_content(), etc. without specifying a post ID
  25.  
  26.  

  27. if ($count == 0) { ?>
  28. <div class="kb-home-big">
  29. <?php if (has_post_thumbnail() ) {
  30. the_post_thumbnail('kb-home-thumb', array('class' => 'kb-home-thumb-small'));
  31. }?>
  32. <h2><?php the_title();?></h2>
  33. <span class="theExcerpt"><?php echo excerpt(8);?></span>
  34. <a class="link" href="<?php the_permalink();?>">Read More</a>
  35. </div>
  36. <?php } else { ?>
  37. <div class="kb-home-list">
  38. <h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2>
  39. </div>

  40. <?php } ?> 
  41. <?php $count ++;  endforeach; ?>
  42. <div class="clear"></div>
  43. <?php endforeach; ?>
  44. </div>



  45. <div id="tabRecent">
  46. <!-- DISPLAY ALL KNOWLEDGE BASE POSTS, BY DATE OFFSET FIRST 7 DISPLAYED IN MULTI-COLUMN LAYOUT -->
  47. <ul class="post-list">
  48. <?php query_posts('post_type=knowledgebase&showposts=10&offset=7&orderby=date'); ?>
  49. <?php while (have_posts()) : the_post(); ?>
  50. <li>
  51. <div class="post-list-item">
  52. <?php if (has_post_thumbnail() ) {
  53. the_post_thumbnail('kb-home-thumb', array('class' => 'kb-home-thumb-small'));
  54. }?>
  55. <span class="theDate">
  56. <?php the_time('F j, Y');?>
  57. </span>
  58. <div class="details">
  59. <?php echo my_get_the_term_list( $post->ID, 'section',  '', ', ', '', array(60) ); ?>
  60. </div>
  61. <h2><?php the_title();?></h2>
  62. <div class="theExcerpt">
  63. <?php echo excerpt(34);?>
  64. </div>
  65. <a class="link" href="<?php the_permalink();?>">Read More</a>
  66. </div>
  67. </li>
  68. <?php endwhile;?>
  69. </ul>
  70. </div>

  71. </div>