Нужна помощь в изменении функции;возвращение оживленного расширения div

Question

Я новичок в jQuery, поэтому, пожалуйста, прости меня, если это асинин.Если это так, пожалуйста, укажите мне место, где я могу получить некоторые знания.

Вот что я делаю: у меня есть макет Wordpress (следовательно, режим совместимости), который представляет собой набор элементов div, организованных с использованием изотоп .Когда пользователь нажимает на элемент div, он расширяется до определенного размера с помощью .animate (), а затем изотоп сортирует все элементы div по ширине.

Все это прекрасно, и я очень доволен этим.Проблема в том, что у меня все впереди, и нет пути назад.Я хочу добавить кнопку, которая возвращает div в исходное состояние (ширина: 156 пикселей, высота: 191 пикселей).Это где мой зеленый статус действительно показывает.Я пробовал просто перепроектировать все, что я уже сделал, когда щелкала закрытая ссылка, но все, чего я смог добиться, - это уменьшить div, чтобы он сразу же вернулся к расширенному размеру.

Если кто-то может указать мне правильное направление, я буду навсегда у тебя в долгу.Кроме того, если я могу предоставить вам больше информации, просто дайте мне знать, и я получу право на это.Большое вам спасибо.

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
});

Answer 1

Анимация размеров элементов в Изотопе немного похожа на пересечение потоков.Лучший способ справиться с этим - анимировать содержимое внутри элемента и изменять только размеры контейнера элемента.

Взгляните на http://jsfiddle.net/desandro/DJVX2/

Плитка состоит из двух элементов.Один для контейнера элемента и один для содержимого элемента:

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

Я использую небольшой мод изотопа, который всегда сортирует содержимое.Это незначительное редактирование в _init.Извините, мне, вероятно, следует объединить это с главной веткой.

Код, который вы ищете, находится внизу:

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();

  });

});

Когда щелкает по плитке, онполучает переключаемый класс big, который переключает размер .item-holder на 50x50 или 170x110.Затем его внутренний элемент .tile анимируется отдельно.Это потому, что Изотоп должен знать точную ширину элемента, прежде чем он раскладывает все элементы.Затем вам просто нужно обновить sortData элемента, используя изотопный метод updateSortData , и вызвать .isotope().

Answer 2

Я бы соблазнился использовать флаг, чтобы увидеть, открыта ли плитка или нет, как в примере, который я кодировал - http://jsfiddle.net/awavq/1/.

Это должно остановить его повторный запуск«открытый» код, как вы описали.Так что запустите свой «обратный» код, если флаг имеет значение true / open.

Надеюсь, что это имеет смысл, дайте мне знать, если нет.

Answer 3

Похоже, что ваш jQuery правильный, и проблема, которую вы описываете, связана с CSS. Попробуйте применить overflow: hidden к элементам div, размер которых вы изменяете.