想要使用jQuery和CSS滑動固定區域

我想實現slideUp的Magic函數。我在這之後寫了一個代碼，這裏是my sample page。想要使用jQuery和CSS滑動固定區域

<!DOCTYPE html> 
<html> 
<head> 
    <title>Learning jQuery</title> 
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> 
    <style> 
     div#foo { 
      height: 100px; 
      background-color: red; 
     } 
     div#bar { 
      height: 100px; 
      background-color: green; 
      display: none; 
     } 
    </style> 
</head> 

<body> 
    <div id="foo">Apple Orange</div> 
    <div id="bar">Banana Lemon</div> 
    <div> 
     <ul> 
      <li>HTML</li> 
      <li>CSS</li> 
      <li>JavaScript</li> 
     </ul> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      setTimeout(function() { 
       $("div#foo").animate(
        {height: "toggle", opacity: "toggle"}, "slow", function() { 
         $("div#bar").show(); 
       }); 
      }, 2000); 
     }); 
    </script> 

</body> 
</html>

看來它的工作，但<ul>地區也移動。我不想<ul>區域移動，只想要<div>區域移動和更改。我應該如何編寫代碼？你能幫我嗎？

我想要實現的是<div id="foo"> slidesUp，即使<div id="foo">是slidingUp，我們可以在<div id="foo">下看到<div id="bar">。

來源

2016-10-03 yamachan

首先，不要在一個HTML文件中使用JS和CSS。把它寫在三個單獨的文件中。然後給我們提供一個jsfiddle鏈接。 –

從我所瞭解的情況來看，你希望div foo縮小高度，但你不想讓酒吧移動，對吧？ –

謝謝您的意見，K Daniek和Naveen Attri。我改變了CSS並可能解決這個問題，但我不知道這是否合適......我使用了'z-index'。 – yamachan

做到這一點：

所有的

ul{ 
     position: absolute; 
     z-index: 5; 
     margin-top: 22px; 
    }

來源

2016-10-03 13:35:27 sTx

謝謝你的advaice，sTx。 – yamachan

想要使用jQuery和CSS滑動固定區域

回答

相關問題