想要使用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">。

首先，不要在一个HTML文件中使用JS和CSS。把它写在三个单独的文件中。然后给我们提供一个jsfiddle链接。 –

从我所了解的情况来看，你希望div foo缩小高度，但你不想让酒吧移动，对吧？ –

谢谢您的意见，K Daniek和Naveen Attri。我改变了CSS并可能解决这个问题，但我不知道这是否合适......我使用了'z-index'。 – yamachan

答

做到这一点：

所有的

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

谢谢你的advaice，sTx。 – yamachan

想要使用jQuery和CSS滑动固定区域

相关推荐