JQuery UI: сочетание слепых и затухающих эффектов

Question

Я даже не уверен, возможно ли это, но я хочу комбинировать слепое и исчезающее.

Fade работает, изменяя непрозрачность элемента, и, думаю, слепым, изменяя ширину / высоту.

Моя цель состоит в том, чтобы создать анимацию, в которой край элемента исчез бы по экрану, то есть сочетание слепого и исчезающего. Я не знаю, есть ли термин для этого.

Но так или иначе, возможно ли это сделать, и если да, то как?

Answer 1

$("#box").animate({height:'0',opacity:'0'}, { complete: function() {this.remove()} });

Просто использовать анимацию?

Answer 2

Я знаю, что об этом спрашивали некоторое время назад, но в наши дни это можно сделать с помощью jquery / jqueryui, например:

$('#test').hide("blind", { direction: "horizontal" }, 1500)
    .fadeOut(1500)
    .dequeue();

Вы можете использовать несколько функций одновременно, также вызывая .dequeue():

$('#test').hide("blind", { direction: "horizontal" }, 1500)
    .hide("slide", { direction: "left" }, 1500)
    .fadeOut(1500)
    .dequeue()
    .dequeue();

Приведенный выше эффект будет использовать эффект «сдвиг» и «слепой» для скрытия «теста» при одновременном исчезновении. Вот демоверсия jsfiddle:

http://jsfiddle.net/DirectCtrl/rVp35/1/

Answer 3

Решение, о котором я сейчас думаю, состоит в том, чтобы разбить затухающий элемент на части размером 1 пиксель, а затем затухать каждый пиксель по отдельности в то же время, когда происходит ослепление. Я не могу представить, чтобы это было гладко с текущими браузерами.

Я просто собираюсь назвать это «невозможно».

Answer 4

Самый простой способ добиться этого - использовать пользовательский интерфейс jQuery и функции toggleClass или addClass . То, что делают эти функции, является анимированным из одного класса в другой, так что по сути вы просто определяете начальное состояние и конечное состояние, а функции заботятся обо всем остальном.

Надеюсь, это поможет!

нажмите здесь для скрипки

CSS

---

.divHidden{
    height: 150px;
    opacity: 0.0;
    width: 0px; /*Set to 0 so div is not visible */
    overflow: hidden;
    background: yellow;
}

.divShown{
    opacity: 1.0;
    width: 100px;
}

HTML

---

<button>Click me</button>
<div id="test" class="divHidden">Testing</div>

Javascript

---

$('button').click(function(){
    $('#test').addClass('divShown', 2000);
});

Answer 5

Поиграйте с функцией jQuery animate () . Это в основном позволяет линейно интерполировать между значениями CSS (от того, с чего начинается объект, до значений, которые вы определяете) в течение заданного промежутка времени. Таким образом, вы можете использовать это, чтобы самостоятельно изменять непрозрачность и ширину для достижения желаемого эффекта.

Будьте осторожны при этом, поскольку вам нужно будет учесть все варианты непрозрачности, поскольку IE еще не поддерживает стандартную "opacity: value;" один.