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

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

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

  28. <?php setup_postdata($post); //enables the_title(), the_content(), etc. without specifying a post ID
  29.  
  30.  

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

  46. <?php } ?> 
  47. <?php $count ++;  endforeach; ?>
  48. <div class="clear"></div>
  49. <?php endforeach; ?>
  50. </div>



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

  81. </div>