JQuery - Объединить ширину и скрыть эффекты

Question

Полный новичок, поэтому я, вероятно, пропустил что-то очевидное, но ... Я не могу совместить эффект анимации (ширины) с эффектом 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}); 
} 

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

написать

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

или короче

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