Эффект затухания/появления и слайд эффект

@Ustas83 · Регистрация: 20.03.2013

Студворк — интернет-сервис помощи студентам

Привет Всем. Подскажите как можно решить эту задачу? Пока с тем что есть выходит криво:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$("#amben").animate({opacity: "1"}, 2000);
$("#amben").animate({opacity: "0.50"}, 2000);
setTimeout(arguments.callee, 5000)
 
$("#amben").hover(
function() {
$(this).animate({padding: "133"});
},
function() {
$(this).animate({padding: "40"});
}
);

Задумка такая чтобы банер затухал и появлялся постоянно ну как бы мерцает он, вот первая часть вроде с этим справляеться на ура, вторая часть где hover по идее должна заставлять его раскрываться, а когда уводишь мышь обратно закрываться. (напорловину). Со второй частью выходит так что пока не пройдет часть анимации она не разворачивается, потом он почему то выдвигается и обратно задвигается и снова выдивается, когда наводишь на него первый раз, а потом уже нормально. И он он не выдвигаеться до тех пор пока функция анимации не пройдет цикл полностью. То есть я подвожу мышью он ждет пока пройдет затухание появление и только потом выдвигаеться...

@vladikmoroz037 · 06.12.2017, 22:54

Там мабуть нада ввести $(document).ready(function(){
})
как то так сам плохо знаю javascript

@msheal · 07.12.2017, 01:43

Если первая часть работает, значит проблема не в $(document).ready
Дайте полный код разметки и стилей

@Lazy_Den · 07.12.2017, 01:59

Ustas83, что мешает сделать это на CSS? Религия? ))

HTML5
1
<div class="banner"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.banner {
    width: 150px;
    height: 150px;
    padding: 40px;
    -webkit-animation: blink 1s ease-out infinite;
    animation: blink 2s ease-out infinite;
    -webkit-transition: padding .5s linear;
    transition: padding .5s linear;
}
.banner:hover {
    padding: 133px;
}
@-webkit-keyframes blink {
    0% {opacity: 1;}
    50% {opacity: .5;}
    100% {opacity: 1;}
}
 
@keyframes blink {
    0% {opacity: 1;}
    50% {opacity: .5;}
    100% {opacity: 1;}
}

@msheal · 07.12.2017, 02:07

Lazy_Den, за что ты старенький вебкит обделил, жалко было и ему 2 секунды дать?)

@Lazy_Den · 07.12.2017, 02:15

msheal, старенький уже на покой ушел и молодым дорогу дал

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@vladikmoroz037 0 / 0 / 0 Регистрация: 06.12.2017 Сообщений: 1
	06.12.2017, 22:54
	Там мабуть нада ввести $(document).ready(function(){ }) как то так сам плохо знаю javascript 0

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	07.12.2017, 01:43
	Если первая часть работает, значит проблема не в $(document).ready Дайте полный код разметки и стилей 0

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	07.12.2017, 02:07
	Lazy_Den, за что ты старенький вебкит обделил, жалко было и ему 2 секунды дать?) 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	07.12.2017, 02:15
	msheal, старенький уже на покой ушел и молодым дорогу дал 0