SlideUp/SlideDown вызывает скачок

Question

Я использую слайд-эффект slideUp и slideDown JQuery на одном из моих веб-страниц, чтобы получить опцию «Основной поиск и расширенный поиск с дополнительным/меньшим». Он функционирует отлично. Я использую этот код. Но проблема в том, что когда я нажимаю больше опций, он прыгает при сдвиге. Но когда я использую то же самое в режиме администратора (после входа на сайт как Admin), он работает плавно. Я пробовал много методов, которые я нашел в Интернете, но не смог сработать. Может ли кто-нибудь проверить мой код, если у него возникли проблемы?

Спасибо за ваше время.

EDIT: Когда он прыгает? - По умолчанию используется базовый поиск и «Дополнительная кнопка выбора». Когда я нажмите «Дополнительно», он переместит основной поиск и слайды. Выполните предварительный поиск , и когда скопируйте расширенный поиск , он внезапно прыгает. Надеюсь, это имеет смысл.

EDIT2: Адрес fiddle. Это пример кода. Поскольку у меня есть некоторые операторы выбора в расширенном поиске, мы можем четко видеть, когда он прыгает.

<script> 
    jQuery.noConflict(); 
    jQuery(document).ready(function($) { 
     $(".view-filters").hide(); 
     $(".more").click(function() { 

      $(".search-form").slideUp("slow"); 
      $(".view-filters").slideDown("slow"); 
     }); 
     $(".less").click(function() { 
      $(".view-filters").slideUp("slow"); 
      $(".search-form").slideDown("slow"); 
     }); 
    }); 
</script> 

<< There is some code here for Search form. >> 

<div class = "search-form more"><b>More Options</b> <img src = "images/down_arrow.jpg"></img></div> 
<div class = "view-filters less"><b>Less Options</b> <img src = "images/up_arrow1.jpg"></img></div> 

<style> 
    .search-form 
    { 
     overflow: hidden; 

    } 
    .view-filters 
    { 
     display:block; 
    } 
    .pager 
    { 
     display:none; 
    } 
    table 
    { 
     display:none; 
    } 
</style> 

<< There is some code here for Advanced Search Form>> 

Answer 1

Имеет ли HTML в вашей модели jsfiddle то, что у вас на самом деле? Отсутствует закрытие </div> для «Меньше опций», но также для каждого щелчка, у вас есть два элемента, сдвигающихся вверх, и два элемента скользят вниз. Он работает намного лучше, если у вас есть один элемент слайда.

Можете ли вы гнездятся ваши элементы, как это:

<div class="search-form"> 
There is some code for the basic search here. 
<div class="more"><b>More Options</b></div> 
</div> 

<div class="view-filters"> 
<div class="less"><b>Less Options</b></div> 
There is some code for the advanced search here. 
</div> 

jsfiddle

Или, возможно, даже like this.

Answer 2

(Возможно, кто-то из более чем 50 репутации должен опубликовать это как комментарий или должен проинструктировать меня о том, что еще делать с этим ответом, но я работаю с тем, что у меня есть сейчас ...)

Для всех, у кого есть аналогичная проблема, общая проблема, по-видимому, находится в значении margin для определенных элементов.

На странице, которая включала Bootstrap 3.3.7 Я использовал slideUp() на div, который содержал в <h3>, а также некоторые другие вещи.

Ключ к остановке прыжок, что произошедший, как только я назвал slideUp() на div было установить margin-top:0px на <h3> он содержится.