Блог

Я пишу плагин для всплывающего div-файла по щелчку мыши. У меня создан скрытый div, и я хочу его скрыть. Однако, вместо того, чтобы исчезать, он просто появляется, как если бы я вызвал show () . Я использую инструмент позиционирования пользовательского интерфейса jQuery, поэтому мой код выглядит следующим образом:

 $('#popover-1' index).fadeIn('slow').position({
                    of: elem,
                    my: 'center top',
                    at: 'center bottom',
                    offset: '0 10'
                });
  

Я подумал, что, возможно, я попробую быть умным, и изменил это на это, но без эффекта:

 $('#popover-' index).fadeIn('slow', function() {
                    $(this).position({
                        of: elem,
                        my: 'center top',
                        at: 'center bottom',
                        offset: '0 10'
                    });
                });
  

HTML выглядит следующим образом:

 <div id="person-edit-1"  class='popover bottom' style="display:none;">
  <div class="arrow top" style="position: absolute; "></div>
  <div>Content goes here</div>
</div>
  

Метод position не будет позиционировать невидимые элементы, поэтому он не работал, когда я вызывал position перед fadeIn.

Заранее спасибо!

Если позиция jquery-ui должна быть видимой, то вам придется ее отобразить, расположить, повторно скрыть, а затем затемнить.

Один из вариантов: вместо использования fadeIn (‘медленный’) вы могли бы расположить элемент, установить непрозрачность в 0, затем анимировать свойство opacity. Это будет работать только в браузерах, которые понимают свойство opacity (не IE):

 $('#popover-'   index).show().position({
  of: elem,
  my: 'center top',
  at: 'center bottom',
  offset: '0 10'
}).css('opacity', '0').animate({'opacity': '1'}, 'slow');