Как сделать плавный переход при перемещении элемента из поля left-left: -9999px на страницу?

0

Вот еще несколько деталей - из-за некоторых странных ограничений с API YouTube я вынужден вытащить контейнер со страницы, чтобы создать впечатление о скрытии контейнера.

Я достигаю этого, используя этот класс:

.my_hide{
    margin-left:-9999px;
    position:fixed !important;
}

И используя методы JQuery $("player-list_container").removeClass("my_hide") и $("player-list_container").addClass("my_hide") для управления переключением.

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

Такое поведение можно продемонстрировать здесь

Добавьте видео, введя и найдите что-нибудь, а затем нажмите кнопку воспроизведения, расположенную ниже. Вы должны соблюдать описанное поведение.

  • 0
    Вы можете использовать функцию jquery anitmate ()
Теги:

4 ответа

3
Лучший ответ

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

В этом случае изменение свойства position, безусловно, даст вам прыжок вместо гладкого эффекта, поскольку это влияет на весь макет страницы (подробнее). Вместо этого вы можете изменить свою позицию, используя свойство CSS3 animation translate.

Вот демо, которое я закодировал, который делает именно то, что вы хотите. http://codepen.io/anon/pen/EgcIi

Кнопка "Click me" позволяет переключаться между снятием контейнера и страницей, и он делает это плавно. Вы также можете настроить время, необходимое для изменения положения контейнера. (На данный момент его 500 мс)

Поделиться
  • 0
    мне нравится лучше, чем моя лол
2

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

Тогда не бросайте элемент с страницы с помощью CSS. Оставьте его там, где он есть, и .hide() его с помощью .hide(). Затем .fadeIn() его с помощью .fadeIn().

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

Поделиться
  • 0
    Я упоминал в начале своего поста, что это не вариант из-за ограничений API YouTube. Я хорошо исследовал эту проблему, и перемещение контейнера со страницы было бы лучшим решением, мне просто нужно выяснить, как обойти эту проблему.
1

На моем экране он просто появился. Im не 100% уверен, какой тип поп-эффекта вы хотите, но это говорит, посмотрите http://api.jquery.com/animate/

Я собирался составить пример, но на этой странице есть куча!

удачи!

PS: прокрутите вниз все примеры визуальной анимации. Вот пример кода:

$('#myBtn').click(function(){
$( '.ytv' ).fadeTo( "fast", Math.random() );
    //add animation code here;
});

проверьте грубую скрипку. edit: heres пример: http://jsfiddle.net/somdow/Lef9n/2/

просто нажмите красную область справа от видео

Поделиться
  • 0
    Ну, «всплывающее окно» этого контейнера не является желаемым эффектом. Это просто контейнер, занимающий то место, в котором он должен быть. Я хочу, чтобы он выглядел так, как будто контейнер постепенно увеличивается в своем положении, то есть мне нужно было бы переместить контейнер в это положение, прежде чем использовать любой тип функции анимации.
  • 0
    Я понимаю. Хотя ответ все равно будет таким же, я полагаю. Например, div, который динамически хранит код, который вызывает искомый контент, будет скрыт, но на месте. Затем, когда кнопка воспроизведения нажата, вы можете вызывать функцию, и внутри этой функции вы можете указать, какие эффекты она будет иметь. например, в этой ссылке есть анимация для оси x / y, поэтому вы можете реализовать ее по щелчку и в то же время анимировать непрозрачность и т. д. Все, что вам нужно, - это ссылка. После того, как вы протестировали обе анимации, поместите их в функцию и нажмите ее, чтобы воспроизвести.
Показать ещё 2 комментария
0

Функция анимации в jQuery wll поможет вам

Поделиться
  • 1
    Немного больше деталей может быть полезно для ОП.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню