如何在点击进入javascript下拉列表时添加淡入淡出？

Question

我正在使用这个：https://gist.github.com/nguyenning/f99b38ec9ccdf3b73732并轻松创建了一个效果很好的下拉菜单，但是我希望点击菜单时淡入淡出。这是我尝试过但fadeIn无法正常工作：

#include<stdio.h>
struct my_structure {
    char name[20];
    int number;
    int rank;
};
int main()
{
    int n,i;
    scanf("%d",&n);
    struct my_structure variable[n];
    struct my_structure *ptr;
    ptr = &variable;
    for(i=0; i<n; i++)
    {
        scanf("%s",ptr->name);
        scanf("%d",&ptr->number);
        scanf("%d",&ptr->rank);
    }
    for(i=0; i<n; i++)
    {
        printf("NAME: %s\n", ptr->name);
        printf("NUMBER: %d\n", ptr->number);
        printf("RANK: %d", ptr->rank);
    }
    return 0;
}

Answer 1

.slideToggle（）函数有效。这是你想要的吗？

＆＃13;

＆＃13;

$(function () {
  var $overlay = $('.overlay');
  var $toggle = $('.toggle-menu');
  $toggle.click(function () {
    $overlay.slideToggle();
  });
});

＆＃13;

.hidden {
  display: none;
}

.container {
  width: 300px;
  padding: 16px;
  margin: auto;
  position: relative;
  
  border-radius: 2px;
  border: 1px solid #ccc;
}

.overlay {
  position: absolute;
  border-radius: 2px;
  border: 1px solid #ccc;
}

＆＃13;

  <div class="container">
    <a href="#" class="toggle-menu">Toggle Menu</a>
    <div class="overlay hidden">
      <ul>
        <li>
          <a href="#">Menu 1</a>
        </li>
        <li>
          <a href="#">Menu 2</a>
        </li>
        <li>
          <a href="#">Menu 3</a>
        </li>
      </ul>
    </div>
  </div>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="script.js"></script>

＆＃13;

＆＃13;

＆＃13;