Я не могу изящно открывать свои div

Question

У меня есть сценарий, по которому мне действительно нужна помощь. Все отлично работает как есть, но я бы хотел, чтобы div открывался плавно, а не мгновенно. У меня по умолчанию все они закрыты, и мне нужно оставить их такими. Кроме того, я хочу, чтобы открывался только 1 div, поэтому другой должен закрываться при нажатии 1. Я безуспешно пытался fadein и toggle. Кто-нибудь может мне помочь с этим, пожалуйста?

https://jsfiddle.net/lepew/xh5x4cgc/3/

function toggle(id)
{
   var e = document.getElementById(id);

   if(e.style.display == 'block')
      e.style.display = 'none';	
   else
      var list = document.getElementsByClassName("dbn");
      for (var i = 0; i < list.length; i++)
      {
         list[i].style.display="none";
         e.style.display = 'block';
      }
}

.dbn
{
   display: none;
   xfloat: right;
   xfloat: left;
   xwidth: 30%;
   xborder: .05em solid #000;
   border: 1px solid lime;
   padding: .8em;
   margin: 1em;
   box-shadow: 0 0 .3em #000;

}
#aa
{
   background-color:#f00;
   xfloat: left;
}

#bb
{
   background-color:#0f0;
   xfloat: left;
}

#cc
{   
   background-color:#00f;
   xfloat: left;
}

#pepe
{
border: 1px solid yellow;
}

.lepew
{
width: 150px;
display: inline-block;
background-color: lime;
}

    <div id="pepe">
        <a onclick="toggle('aa');" class="lepew" style="cursor:pointer ">Peter</a>
        <a onclick="toggle('bb');" class="lepew" style="cursor:pointer ">Paul</a>
        <a onclick="toggle('cc');" class="lepew" style="cursor:pointer ">Mary</a>
    </div>
    <div id="aa" class="dbn">
        Content of Div aa
    </div>
    <div id="bb" class="dbn">
        Content of Div bb
    </div>
    <div id="cc" class="dbn">
        Content of Div cc
    </div>
    <br />
    <br />
<div>
Nuthing here
</div>
    <br />
    <br />
    <br />

javascript jquery css

0

user3344341 31 Дек 2017 в 22:44

Answer 1

На этой странице: http://api.jquery.com/slideDown/.

Начиная с jQuery 1.6, метод .promise() можно использовать вместе с deferred.done() для выполнения одного обратного вызова для анимации в целом, когда все совпадающие элементы завершили анимацию (см. пример для .promise ()).

$("button").on("click", function () {
  var button = $(this);
  var parent = button.parent();
  var buttons = parent.children();
  var i = buttons.index(button);
  var panels = $("#panels").children();
  panels.finish(); // stop running animation
  panels.slideUp().promise().done(function () {
    $("#panels").children().eq(i).slideDown();
  });
});

#buttons { margin-bottom: .5em; }
#panels > div { padding: .5em; }
#panels > div { display: none; }
#panel-1 { background: #c5e1a5; }
#panel-2 { background: #fff59d; }
#panel-3 { background: #b2dfdb; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
  <button type="button">panel #1</button>
  <button type="button">panel #2</button>
  <button type="button">panel #3</button>
</div>
<div id="panels">
  <div id="panel-1">panel #1</div>
  <div id="panel-2">panel #2</div>
  <div id="panel-3">panel #3</div>
</div>

0

leaf 31 Дек 2017 в 20:29

Answer 2

Как насчет решения без javascript или jquery, использующего только CSS, используйте :focus для определения клика и анимации высоты div с помощью keyframes

.my-menu {
  border: 1px solid yellow;
  width: 100%;
  background-color: #6D565E;
  position: fixed;
  z-index: 100;
}

.my-menu a {
  display: inline-block;
  text-align: center;
  color: white;
  font-size: 36px;
  padding: 10px;
  position: relative;
}

.my-menu a:hover {
  background-color: #F4D7CB;
}

.my-menu a span {
  position: absolute;
  background-color: pink;
  text-align: center;
  height: 0px;
  width: 600px;
  top: 80px;
  left: 0;
  color: #6D565E;
  overflow: hidden;
}

.my-menu a:focus span {
  -webkit-animation-name: slidedown;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s;
  /* Safari 4.0 - 8.0 */
  animation-name: slidedown;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@-webkit-keyframes slidedown {
  0% {
    height: 0px;
  }
  100% {
    height: 600px;
  }
}


/* Standard syntax */

@keyframes slidedown {
  0% {
    height: 0px;
  }
  100% {
    height: 600px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-menu">
  <a class="lepew" href="#.">Peter<span>
  Content of Div aa
</span>
</a>

  <a class="lepew" href="#.">Paul<span>
  Content of Div bb
</span></a>
  <a class="lepew" href="#.">Mary<span>
  Content of Div cc
</span></a>
</div>



<br />
<br />
<div>
  Nuthing here
</div>
<br />
<br />
<br />

0

Muhammad Omer Aslam 31 Дек 2017 в 21:20

Я не могу изящно открывать свои div

2 ответа

Похожие вопросы

Новые вопросы

javascript