JQuery - объединение эффектов ширины и скрытия - PullRequest
2 голосов
/ 12 ноября 2010

Полный новичок, поэтому я, вероятно, упускаю что-то очевидное, но ... Кажется, я не могу объединить эффект анимации (ширины) с эффектом this.hide, я могу заставить одну из них работать, комментируя другую. Вот код:

function showSlidingDiv(column){
var maxWidth = 200;
var smallWidth = 80;
var myWidth = $(column).width();


$("div").each(function(){
        $(this).animate({width: smallWidth});
        $(this).hide();
     });

$(column).show();
$(column).animate({width: maxWidth});
}

Я использую это для большой таблицы информации, чтобы пользователь мог щелкнуть по одному заголовку и расширить этот столбец информации, уменьшив при этом все остальные. Каждый тд имеет внутри себя div, который расширяется или сокращается. Я хотел бы также скрыть, если это возможно, анимацией элементы div в других столбцах одновременно. Как я уже сказал, это будет работать для одного или другого, но не для обоих вместе.

Любая помощь приветствуется. Спасибо.

Ответы [ 4 ]

4 голосов
/ 12 ноября 2010

.hide() не является функцией, поставленной в очередь, ее также необходимо вызывать в обратном вызове .animate(), например:

$("div").animate({width: smallWidth}, function() {
  $(this).hide();
});

Или сделайте функцию очередью с помощью этого трюка:

$("div").animate({width: smallWidth}).hide(0);

Нет необходимости в .each() в любом случае, так как приведенный выше код будет применяться и ко всем совпадениям.

1 голос
/ 12 ноября 2010

Просто используйте функции обратного вызова. Нравится:

function showSlidingDiv(column) {
  var maxWidth = 200;
  var smallWidth = 80;
  var myWidth = $(column).width();


  $("div").each(function() {
    $(this).animate({width: smallWidth}, 1000, function() {
      // this callback is executed when the animation is done
      $(this).hide();
    });
  });

  $(column).show();
  $(column).animate({width: maxWidth});
}
0 голосов
/ 12 ноября 2010

Проблема в том, что только анимационные методы связаны друг с другом (один за другим).Чтобы сделать hide() метод анимации, вы должны указать продолжительность, поэтому вместо

    $(this).animate({width: smallWidth});
    $(this).hide();

пишите

    $(this).animate({width: smallWidth});
    $(this).hide(0);

или короче

    $(this).animate({width: smallWidth}).hide(0);
0 голосов
/ 12 ноября 2010

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

$("div").each(function(){
    $(this).animate({width: smallWidth}, 1000, function() {
       $(this).hide();
    });
 });
...