jQuery плагин для постепенного появления дочернего div блока

Дата публикации:Февраль 27, 2011

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

...
//устанавливаем новую функцию плагина: authorHover
jQuery.fn.authorHover = function(applyTo) {
  return this.each(function(){
  //в цикле if/else проверяем, был ли передан параметр
  //если никакого параметра не передано, находим дочерний div
  if(applyTo){
    obj = applyTo
  }else{
    obj = "div"; 
  }
  //скрываем дочерний div или переданный селектор
  jQuery(this).find(obj).hide();
  //Для основного обернутого набора устанавливаем hover
  jQuery(this).css("cursor", "pointer").hover(function(){
      //изменяем стили дочернего div или переданного селектора
      //и применяем к нему эффект постепенного появления 
  jQuery(this).find(obj).css("position","absolute")
    .css("margin-top","-10px").css("margin-left","-10px")
    .css("width","400px")
    .css("border", "1px solid #666").fadeIn("slow");
      }, function(){
//постепенное исчезновение дочернего селектора
        jQuery(this).find(obj).fadeOut("slow");
      });
   });
};

Теперь, когда мы создали скрипт jQuery плагина, давайте проверим его работу в нашей теме. Все, что нам потребуется сделать, это подключить новый плагин, названный jquery.authover.js, к теме. Следующий сниппет необходимо разместить ниже хука wp_head:

...
<script type="text/javascript">
jQuery(function(){
  jQuery(".authorName").authorHover();
});
</script>
...

Два следующих скриншота демонстрируют постепенное появление блока div:

Поделиться

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.