Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Одновременные действия (https://javascript.ru/forum/jquery/67327-odnovremennye-dejjstviya.html)

рони 10.02.2017 21:43

Цитата:

Сообщение от laimas
.animate().slideUp() одновременно для одного объекта не получится.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #slider{
    width: 300px;
    height: 500px;
    background-color: #FF00FF;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
$('div').animate({
        backgroundColor:'black'
    },7000)
.slideUp(7000).dequeue();

});
  </script>
</head>

<body>
<div id="slider"></div>

</body>
</html>

Aqua77 10.02.2017 22:42

Цитата:

Сообщение от laimas (Сообщение 443981)
В JQ функции выполняющие анимацию помещаются в очередь автоматически. Поэтому непосредственно .animate().slideUp() одновременно для одного объекта не получится.

Я тут https://jsfiddle.net/jz11xock/7/


нагуглил

laimas 10.02.2017 22:48

рони, ну это UI, кстати он у него же подключен, а я с ним слабо знаком.

рони 10.02.2017 23:02

Цитата:

Сообщение от laimas
ну это UI

тут только парсинг color от ui, остальное из коробки

Aqua77 10.02.2017 23:04

А без UI никак такое и не реализовать, через класс и transition не получится
*{
    margin:0;
    padding:0;
}

div{
    width: 60px;
    height: 250px;
    background: red;
    transition: all 1s;
}
.q1{
   background: black;
}
<div></div>
$(document).ready(function() {
    
     $('div').addClass('q1');
    $('div').slideUp(3400);
    
    
});

laimas 10.02.2017 23:13

Цитата:

Сообщение от Aqua77

Да, можно, что-то упустил это. Но опять таки так можно только методы animate() или его в сочетании запустить.

И все так так:

$('div').slideUp(3400).animate( ....

а не получать постоянно объект. А подключать UI ради анимации цвета, так лучше повесится. )

laimas 10.02.2017 23:16

Цитата:

Сообщение от рони
тут только парсинг color от ui

А с какой версии .dequeue() появился?

Aqua77 10.02.2017 23:19

Цитата:

Сообщение от laimas (Сообщение 443993)
Да, можно, что-то упустил это. Но опять таки так можно только методы animate() или его в сочетании запустить.

И все так так:

$('div').slideUp(3400).animate( ....

а не получать постоянно объект. А подключать UI ради анимации цвета, так лучше повесится. )

Просто без UI это никак не реализуешь, я выше на переходах css и классами пробовал не получилось. Потом, ладно slideUp не особо сложная анимация, можно и самому сделать. Но вдруг захотеть связать свою и какую нибудь сложную анимацию.

рони 10.02.2017 23:29

Aqua77,
https://daneden.github.io/animate.css/

laimas 10.02.2017 23:29

Цитата:

Сообщение от Aqua77
Просто без UI это никак не реализуешь, я выше на переходах css и классами пробовал не получилось.

https://cdnjs.cloudflare.com/ajax/li...y.color.min.js

Это всего 6.5 Кб, а не более 200 Кб UI монстра. Ну я еще понимаю, когда надо наворотить и причем на все случаи жизни, но чтобы ради пустяка....

Теперь JQ можно под себя упаковать, только необходимое и пора. Чего-то добавить, ну так свое расширение можно написать. Универсальность конечно хорошо, но есть у нее и минус - много лишнего чего не надо.


Часовой пояс GMT +3, время: 07:24.