How to add easing to div in conjuction with .load

1 Views

WordPress is generating the links to Posts for a gallery. 

<ul>
<li><a href="/link/to/whatever" class="gallery-link">I Am A Gallery!</a></li>
<li><a href="/link/to/whatever-2" class="gallery-link">I Am Another Gallery!</a></li>
</ul>

I don’t want the links to go to the post page but instead have the content (.entry-content) load in a div (#result) above the list of the links.

Read More
jQuery( document ).ready(function() {
    jQuery(".gallery-link").click(function() { 
        var $target = jQuery(this).attr("href"); //get the URL where the content is
        jQuery("#result").empty() // if the div has stuff in it, get rid of it
        jQuery("#result").css( { 'background-image': 'url(http://staging.caterernyc.com/wp-content/themes/caterer/images/ajax-loader.gif)', 'background-repeat': 'no-repeat', 'background-position': 'center', 'min-height': '200px'  } ); // show the loading gif while the .entry-content is being loaded

        jQuery("#result").load(this.href+" .entry-content", function() { // load the content
                    jQuery("#result").css('background-image', 'none');  // remove the loading gif
        });

        return false;
    });
});

This works but what I want to do is ease the #result div open instead of the content just appearing. Nothing I’ve tried yet has worked. Is this even possible? Am I going about this all wrong?

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. You could try something like:

    jQuery("#result").hide().load( url,function(){
  /* slide open once loaded*/
  $(this).slideDown();
});

    No need to use empty() prior to load(). The exisiting content is being replaced by load(). Also suggest using toggling a class instead of replacing background with .css(). It is cleaner and easier to maintain code