Need help reversing a function; reverting an animated expansion of a div

1 Views

I’m new to jQuery, so please forgive me if this is asinine. If so, please point me to a place where I can gain some knowledge.

Here’s what I’m doing: I have a WordPress (hence compatibility mode) layout that is a bunch of divs arranged using isotope. When a user clicks on a div, it expands out to a certain size using .animate() and then isotope sorts all of the divs by width.

Read More

This all runs beautiful and I’m very happy with it. The problem is I’ve got all forward and no reverse. I want to add a button that reverts the div to it’s original state (width: 156px height: 191px). This is where my green status is really showing. I’ve tried just reverse engineering everything I’ve already done when a close link is clicked, but all I’ve been able to achieve is shrinking the div only to have it immediately shoot back to the expanded size.

If someone can point me in the right direction, I’d be forever in your debt. Also, if I can provide you with any more information just let me know and I’ll get right on it. Thank you so much. 

jQuery().ready(function() {

    // Variables - Project Tiles
    var $tile = jQuery(".tile");

    //Expands tile on click
    jQuery($tile).click(function(){
        $tile
            .stop()
            jQuery(this).addClass('expanded'); //change cell's class
            jQuery(".tile-content", this).hide(); //hide starting content
            jQuery(this).animate({ //animate the expansion of the cell
                width: '933px',
                height: 'auto',
            }, "slow", function() { //things to do after animation
                jQuery(".expanded-content", this).fadeIn('slow'); //show post content
                jQuery("#content").isotope({  //re-arrange tiles
                    sortBy : 'width',
            });
        });
    }); 
    //  close tile
});
Post Views: 1

Related posts

Leave a Reply

3 comments

  1. Animating item sizes within Isotope is a bit like crossing the streams. The best way to handle this is to animate content within an item, and only change sizes of the item container.

    Take a look at http://jsfiddle.net/desandro/DJVX2/

    The tiles have two elements. One for the item container, and one for the item’s content:

    <div id="container">
  <div class="tile-holder">
    <div class="tile"></div>
  </div>
  <div class="tile-holder">
    <div class="tile"></div>
  </div>
  ...
</div>

    I’m using a slight mod of Isotope that always sorts content. It’s a minor edit within _init. Sorry, I should probably merge this in to the master branch.

    The code you’re looking for is all the way at the bottom:

    jQuery(function(){

  var $container = jQuery('#container'),
      $tileHolders = jQuery('.tile-holder');

  $container.isotope({
    itemSelector: '.tile-holder',
    masonry: {
      columnWidth: 60
    },
    getSortData : {
      width : function( $item ){
        // sort by biggest width first, then by original order
        return -$item.width() + $item.index();
      }
    },
    sortBy : 'width'
  })

  $tileHolders.click(function(){
    var $this = jQuery(this),
        tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : 
          { width: 170, height: 110};
    $this.toggleClass('big');

    $this.find('.tile').stop().animate( tileStyle );
    // update sortData for new tile's width
    $container.isotope( 'updateSortData', $this ).isotope();

  });

});

    When a tile is clicked, it gets the big class toggled, which will toggle the size of .item-holder to 50×50 or 170×110. Then its inner element .tile gets animated separately. This is because Isotope needs to know the exact width of an item before it lays out all the items. Then, you just need to update the item’s sortData using Isotope’s updateSortData method, and trigger .isotope().

  3. I’d be tempted to use a flag to see if the the tile is open or not, similar to this example i’ve coded – http://jsfiddle.net/awavq/1/.

    This should stop it rerunning the “open” code, like you described. So run your “reverse” code if the flag is true/open.

    Hope that makes sense, let me know if not.