javascript - FadeIn FadeOut 以及为什么 div 会移动？

Question

可能是我遗漏的东西，但我对此有点头疼。

我想让“子菜单 div”在显示/隐藏链接的右侧对齐。

当我加载 div 时，它的位置是正确的，但是当我单击以隐藏/显示链接时，div 突然将位置更改为底部。

顺便说一句，有没有其他更好的方法来做到这一点，或者这个很好？另外，如果我不想在页面加载时显示 div，我正在考虑使用 .hide() 或隐藏样式，可以吗？

示例 http://jsfiddle.net/DH75T/

提前致谢

CSS

div.inline2 {
    display: inline-block;
    width: 150px;
}
div.inline {
    position:absolute;
    display: inline-block;
    border:1px solid #CCC;
    background:#FFF;
} 

JS

$(document).ready(function() {  

  $('a#show').click(function() {
    $('div#submenu').fadeIn();
  });

  $('a#hide').click(function() {
    $('div#submenu').fadeOut();
  });
});

HTML

  <div class="inline2">
    <a href="#" id="show">Show_links</a>
    <a href="#" id="hide">Hide links</a>
  </div>

  <div class="inline" id="submenu">
    <a href="#">Link 1</a><br />
    <a href="#">Link 2</a>
  </div>

Answer 1

fadeIn() 添加 div 样式 display: block; 所以 div 显示到下一行

---

在 div 被样式化之前 inline-block

div.inline2 {
    display: inline-block;
    width: 150px;
}

---

<知识库> fiddle Demo

使用类添加 fadeIn 和 fadeOut 的效果，而无需将 div 移动到下一行

$(document).ready(function () {
    $('a#show').click(function () {
        $('div#submenu').removeClass('hidden').addClass('visible');
    });

    $('a#hide').click(function () {
        $('div#submenu').addClass('hidden').removeClass('visible');
    });
});

CSS

.visible {
    opacity: 1;
    transition: opacity 2s linear;
}
.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}