Проблема slideToggle в jQuery

Question

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

Поскольку количество записей очень велико, эффект slideToggle не является желательным. Это просто показывает div вместо скольжения.

У меня есть следующий код обработчика событий

$("div.opendiv").click(function(){
    var openelem = $(this).next();
    openelem.slideToggle();     
});

Я не хочу делить эти записи на страницы.

Что я могу сделать, чтобы эффект slideToggle был плавным?

Спасибо

Answer 1

Поскольку вы переключаете один элемент между тысячами, все браузеры будут показывать задержку для этого. Некоторые больше, чем другие. Это связано с использованием памяти браузером и версией, но также и с машиной пользователя. Очевидно, что лучшие машины могут хорошо манипулировать большим количеством элементов DOM.

Итак, я создал Fiddle с одним обходным путем, чтобы помочь вам: http://jsfiddle.net/9vMEV/6/.

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

Изменить for ограничение от 500 до 1000, 10000, 50000... Будет момент, когда ваш браузер не сможет больше анимировать. И, возможно, произойдет сбой перед показом любой страницы...

В моих тестах анимация получается плавной даже с 30 тысячами td элементы. Так что эта идея решит вашу проблему в некоторых случаях.

Но на самом деле я думаю, что лучший вариант, если вы не хотите разбивать эту большую страницу на много страниц: работать с некоторыми элементами, такими как вкладки, показывать и скрывать в нем несколько сотен тдс. Практически во всех браузерах дети родителей с display: none не обрабатываются анимации и не вызывают лаги.

Answer 2

Вы пытались установить продолжительность, чтобы de slideToggle efect? лайк:

$("div.opendiv").click(function(){
    var openelem = $(this).next();
    openelem.slideToggle(1000);     
});