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

Question

probably is something that I'm missing, but I have a little headache with this.

I'd like to have the "submenu div" align on the right of Show/hide links.

When I load the div is correctly in its place, but when I click to hide/show links, suddenly the div changes the place to the bottom.

BTW, is there any other better way to do this, or this this is good? Also, if I don't what to show the div on the page load, I'm thinking to use .hide() or hidden style, is that ok?

Example http://jsfiddle.net/DH75T/

Thanks in advance

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() adds div style display: block; so div shows down to next line

---

Before div was styled inline-block

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

---

fiddle Demo

Use classes to add effect of fadeIn and fadeOut without moving your div to next line

 $(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; } 

Answer 2

Try:

$(document).ready(function() {          
  $('a#show').click(function() {
    $('div#submenu').removeClass("none");
  });    
  $('a#hide').click(function() {
    $('div#submenu').addClass("none");
  });
});

Fiddle here.

Answer 3

You need to change only jQuery code :) :

<script type="text/javascript">
  $(document).ready(function() {  

$('a#show').click(function() {
$( "div#submenu" ).animate({
    opacity: 1
  }, 500, function() {
    // Animation complete.
  });
});

$('a#hide').click(function() {
$( "div#submenu" ).animate({
    opacity: 0
  }, 500, function() {
    // Animation complete.
  });
});
});</script>