Каким методом сделать анимацию?

254

04 мая 2018, 09:37

http://yapx.ru/v/BTaYd Как сделать данную задачу с помощью jquery ? Или, Какой метод использовать ??

Answer 1

я не гуру jQuery и не знаю как проходить в цикле но в общем если сообщество ruSO поможет доделать т.е сократить код jQuery то будет вообще прилично ...

Примерно делать надо так ...

var elem1 = $("#a"); 
var elem2 = $("#b"); 
var elem3 = $("#c"); 
var elem4 = $("ul"); 
 
$("ul li.a").on("click", function(e) { 
  e.preventDefault(); 
 
  elem1.slideToggle().addClass("toggle"); 
  elem2.hide(); 
  elem3.hide(); 
  elem4.toggleClass("new"); 
}) 
 
$("ul li.b").on("click", function(e) { 
  e.preventDefault(); 
 
  elem1.hide(); 
  elem2.slideToggle().addClass("toggle"); 
  elem3.hide(); 
  elem4.toggleClass("new"); 
}) 
 
$("ul li.c").on("click", function(e) { 
 
  e.preventDefault(); 
 
   elem1.hide(); 
   elem2.hide(); 
   elem3.slideToggle().addClass("toggle"); 
   elem4.toggleClass("new"); 
 
}) 
 
$(document).on("click", ".toggle", function() { 
 
  elem1.hide(); 
  elem2.hide(); 
  elem3.hide(); 
  elem4.removeClass("new"); 
})

* { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  text-decoration: none; 
} 
 
.wrapper { 
  width: 100vw; 
  height: 100vh; 
  position: relative; 
} 
 
.element, 
ul { 
  width: 100vw; 
  height: 100vh; 
  background: #fff; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
 
ul li { 
  border: 3px solid #fbfbfb; 
  background: #fbfbfb; 
  width: 10vw; 
  height: 10vw; 
  border-radius: 50%; 
  text-align: center; 
  line-height: 10vw; 
  margin-left: 20px; 
} 
 
ul li a { 
  font-size: 22px; 
  font-variant: small-caps; 
  display: block; 
  width: 100%; 
  height: 100%; 
} 
 
ul li:hover { 
  border: 3px solid red; 
  background: #ccc; 
} 
 
ul li:hover a { 
  color: #fbfbfb; 
} 
 
.hide-elem1, 
.hide-elem2, 
.hide-elem3 { 
  width: 90vw; 
  height: 70vh; 
  overflow: hidden; 
  margin: auto; 
  position: absolute; 
  bottom: 5vh; 
  left: 5%; 
  display: none; 
  background: #fbfbfb; 
  padding: 20px; 
} 
 
ul.new { 
  position: absolute; 
  top: 20px; 
  width: 50%; 
  left: 0; 
  right: 0; 
  margin: auto; 
  height: 50px; 
  opacity: .1; 
  pointer-events: none; 
} 
 
ul.new li { 
  border-radius: 0; 
  width: auto; 
  height: auto; 
  line-height: 40px; 
  padding: 0 20px; 
} 
 
ul.new li a { 
  font-size: 22px; 
  font-variant: small-caps; 
  height: 50px; 
} 
 
.toggle { 
  animation: ti .3s linear 
} 
 
@keyframes ti { 
  100% { 
    background: yellow; 
    opacity: .2; 
  } 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <link rel="stylesheet" href="css/style.css"> 
</head> 
 
<body> 
  <div class="wrapper"> 
    <div class="element"> 
      <ul> 
        <li class="a"><a href="#a">item1</a></li> 
        <li class="b"><a href="#b">item2</a></li> 
        <li class="c"><a href="#c">item3</a></li> 
      </ul> 
    </div> 
    <div id="a" class="hide-elem1 toggle"> 
      1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae reprehenderit ullam itaque ducimus veritatis. Dolorem, sunt aliquid aspernatur vitae expedita facilis modi enim. Quasi fugit eaque vel magnam, quod, in veritatis. Quis aspernatur, praesentium 
      ipsum eum saepe voluptate repellat iste, cum repellendus ea quam doloribus, et recusandae dolorem sit id. 
    </div> 
    <div id="b" class="hide-elem2 toggle"> 
      2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae reprehenderit ullam itaque ducimus veritatis. Dolorem, sunt aliquid aspernatur vitae expedita facilis modi enim. Quasi fugit eaque vel magnam, quod, in veritatis. Quis aspernatur, praesentium 
      ipsum eum saepe voluptate repellat iste, cum repellendus ea quam doloribus, et recusandae dolorem sit id. 
    </div> 
    <div id="c" class="hide-elem3 toggle"> 
      3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae reprehenderit ullam itaque ducimus veritatis. Dolorem, sunt aliquid aspernatur vitae expedita facilis modi enim. Quasi fugit eaque vel magnam, quod, in veritatis. Quis aspernatur, praesentium 
      ipsum eum saepe voluptate repellat iste, cum repellendus ea quam doloribus, et recusandae dolorem sit id. 
    </div> 
  </div> 
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
</body> 
 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Смена активного пункта меню при скролле

335

HTML

Переходы многоязычного сайта

Подскажите пожалуйста! У меня одна проблема на сайтеЕсли я нахожусь например на /ru/about

199

HTML

Помогите построить блок [требует правки]

как будет лучше построить вот этот блок? Заранее спасибо

214

HTML

Расширение-таймер в фоновом режиме (Chrome)

Хочу написать расширение , которое будет считать время проведенное в интернет, НО счет начинается только по клику на значок расширения и заканчивает...

202