Providing a solution to the issue at hand, I have demonstrated how to incorporate jquery Easing through an example.

UPDATE I have made revisions to my initial post. Please take a look at the revised sample here. I hope this proves helpful.

$('.thumbs').click(function(e){
    e.preventDefault();
    var contents = $(this).closest('.recentPost').find('.caption').html();
    var $container = $('#theContainer').html(contents);
    $container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:100}, {duration: 1000, easing: 'easeInOutCirc'});
    $container.click(function(){
        $container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
        $container.fadeOut('slow');
        $container.html('');
    });
});

A potential solution might involve utilizing this approach - http://jsfiddle.net/YtHbF/8/. This code snippet demonstrates how to display content for each post within a loop, initially hidden with CSS. Upon clicking a post, the content is transferred to #displayed-post, becoming visible. Subsequently, if another post is clicked, its content returns to its original container while the new post's content is displayed instead.

I'm a bit unsure about your requirements - are you leaning towards a PHP solution, a JavaScript solution, or a combination of both? I have a couple of suggestions on how you could approach this. It's worth noting that the jQuery library you mentioned only handles easing options for animations, not the core business logic and behavior of your code.

1. Utilizing ajax
   This approach should suit your needs since you're not dealing with cross-domain requests. Essentially, you would intercept clicks on links, determine their destination, and then send a GET request to fetch that page. Afterwards, you'd extract and insert the relevant HTML content into your page. Here's an example:

   $('.recentPost a').click(function(){
       $.get($(this).attr('href'), function(data){
           //send a get request to the link's target page
           //extract the blog content div from the response
           $("placeholder").html($(data).filter(".blogRight"));
       });
       return false; //prevent default browser action to keep user on the current page
   });
   

   You'd need a <div id="placeholder" /> in your HTML where the content should be displayed.

2. Using PHP + JavaScript
   Instead of fetching content dynamically, you could generate it during page load but keep it hidden. Then, upon clicks, you would show the appropriate existing div on the page.

   Your initial page structure might look like this:

   <div id="contentWrap">
           <div class="hidden-featured-content" id="content-f12">
               <div>Your content here</div>
           </div>
           <div class="hidden-featured-content" id="content-f11">
               <div>Your content here</div>
           </div>
   
           <div id="newBanner"></div>
   
           <div class="recentPost">
               <a href="http://mathewhood.com/sitefiles/?p=35" id="link-f12"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured12.png" class="attachment-post-thumbnail wp-post-image" alt="featured12" title="featured12" /></a>
               <a href="http://mathewhood.com/sitefiles/?p=35"><div class="caption">
                   <div class="captionTitle">Hello World 12!</div>
                   <p></p>
               </div></a>
           </div>
   
           <div class="recentPost">
               <a href="http://mathewhood.com/sitefiles/?p=32" id="link-f11"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured11.png" class="attachment-post-thumbnail wp-post-image" alt="featured11" title="featured11" /></a>
               <a href="http://mathewhood.com/sitefiles/?p=32"><div class="caption">
                   <div class="captionTitle">Hello World 11!</div>
                   <p></p>
               </div></a>
           </div>
        ...
   

   To toggle the appropriate content, you could use something like this:

   $('.recentPost a').click(function(){
       if($(this).attr('id')){
           var x = /link-(.*)/.exec($(this).attr('id')); //determine which content- div to display
           $('.displayed').hide().removeClass('displayed'); //hide any currently displayed content
           $('#content-' + x[1]).show().addClass('displayed'); //display chosen content and mark it as displayed
           return false;
       }
   });
   

To achieve this goal, there are several methods that can be explored. One efficient approach could involve implementing a full ajax solution, although this may necessitate the use of a Wordpress plugin and some advanced scripting.

Alternatively, a more direct method would be to incorporate a box for dynamic content, displaying the content of each post within a hidden DIV underneath its permalink/image. Subsequently, JavaScript could be utilized to transfer content from the hidden DIVs to the dynamic content box upon clicking a permalink. I have developed some code that demonstrates this concept at http://jsfiddle.net/HF9Pr/.

Give this a shot:

<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>

<style type="text/css"> 
div.panel,p.flip
{
width: 203px;
margin: 0px;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 12px;
padding-right: 12px;
background: #c1e0fb;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
}
div.panel
{
height: 288px;
display: none;
border-top: 1px dashed #aaa;
}
p.flip
{
border-top: 1px dashed #aaa;
border-bottom: 1px dashed #aaa;
}
</style>
</head>

<body>

<div class="panel">
<b>sclughslru</b>
<br><br>
ertljhvij3p
<br><br>
<b>veuywihtp</b>
<br><br>
ghdjhrntnd
<br><br>
<b>ehv3rtv</b>
<br><br>
vt4k4kb76kb5
<br><br>
<b>edb3jrr3n54</b>
<br><br>
skcehgkheone
</div>

<p class="flip"><img src="https://dl-web.dropbox.com/get/Pictures/Other/up-down.jpg?w=f17ee285" style="width: 12px; height: 10px; margin-right: 10px;" />Details</p>

</body>