Хотите, чтобы скопировать фиксированную область с помощью 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="bar"> под <div id="foo">.

источник

2016-10-03 yamachan

Прежде всего, не следует использовать JS и CSS в один файл HTML в. Напишите его в трех отдельных файлах. Затем дайте нам ссылку jsfiddle. –

Из того, что я понял, вы хотите, чтобы div foo уменьшался в высоту, но вы не хотите, чтобы бар двигался, не так ли? –

Спасибо за ваши комментарии, К. Даниек и Навин Аттри. Я изменил css и могу решить эту проблему, хотя я не знаю, правильно ли это ... Я использовал 'z-index'. – yamachan

сделать это:

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

источник

2016-10-03 13:35:27 sTx

Спасибо за ваш совет, sTx. – yamachan

Хотите, чтобы скопировать фиксированную область с помощью jQuery и CSS

ответ

Смежные вопросы