Перенести класс css из html в js в рабочем скрипте
Кнопка с анимацией при скролле:
<a href="#" class="toanimate" data-animation="tada">КНОПКА</a> Где toanimate - класс который меняет js на animated, (анимация css без js работает так: animated tada) а data-animation="tada" вид анимации, его и надо засунуть в js чтобы менять tada уже в самом js. blockToAnimate.each(function(){ if(jQuery(this).offset().top < (jQuery(window).scrollTop() + jQuery(window).outerHeight()) && jQuery(this).offset().top + jQuery(this).outerHeight() > (jQuery(window).scrollTop() ) ) { if (!jQuery(this).hasClass("animated")) { jQuery(this).addClass("animated"); animation_type = jQuery(this).data('animation'); jQuery(this).addClass(animation_type); } } else { jQuery(this).removeClass("animated"); //jQuery(this).trigger('animateOut'); animation_type = jQuery(this).data('animation'); jQuery(this).removeClass(animation_type); } });Буду признателен за помощь :thanks: |
Оно уже засунуто, ну и дальше-то что?
|
Возможно я не правильно выразился :)
Нужно сократить ссылку: <a href="#" class="toanimate" data-animation="tada">КНОПКА</a> До вида: <a href="#" class="toanimate">КНОПКА</a> Тип анимации (data-animation="tada") указывать уже в js. |
Ну или сделать так, что бы ссылка была с двумя классами подряд:
Вместо: <a href="#" class="toanimate" data-animation="tada">КНОПКА</a> Сделать: <a href="#" class="toanimate tada>КНОПКА</a> Но что бы js смог обрабатывать это. |
jQuery -
$("елемент").removeAttr("data-animation") JavaScript - елемент.removeAttribute("data-animation") Это удаления атрибута |
Я ничего все равно не понял, кроме одного - автор знает что надо сделать, что на что поменять, какие строки на какие и все такое - но хочет чтобы это сделали за него?
|
Извиняюсь что не понятно выражаю мысль. Попробую иначе.
Я не знаю пока что поменять в js. Но убрав в хтмл data-animation="tada" необходимо что бы функциональность обьектов, в данном случае ссылок сохранилась (те можно было менять тип анимации уже в самом js. |
mrtdiesel,
1. Зачем убирать ? 2. Если значение для всех объектов идентично, - то да - перенести эту переменную в скрипт - логично, если различно и не имеет неизменного алгоритма применительно к селекторам объектов - перенос нелогичен 3. Приведите все возможные варианты анимаций и их параметры (или алгоритм) Я не понял что означает tada или чтобы менять tada уже в самом js. Оно как-то связано с цифровым значением ? 4. Приведите стиль текущей анимации на css (Для нескольких вариантов tada и т.д.) |
1. Когда в хтмл будет только 1 или 2 класса, без дополнительных типов, ковычек - проще, во всяком случае мне :)
2. Необходимо менять переменную (в данном случае "tada" на другие уже в js, руками по желанию, а не по алгоритму. 3. "Tada" - 1 из видов анимации. При подключенном внешнем css файле работает так: class="animated tada;" Все возможные варианты анимации с сайта animate.css 4. "tada" - вид анимации. И работал бы в кнопке БЕЗ js в таком виде: <a href="#" class="animated tada">КНОПКА</a>, но для управления анимацией через js приходится стоку писать уже с большим кол-вом слов + заключать тип анимации "tada" в ковычки (чего я не хочу делать если перенести смену типа анимации в код js, который, например, можно положить на внешний сервер). <a href="#" class="toanimate" data-animation="tada">КНОПКА</a>, и js уже ищет и меняет класс animate на правильный - animated и подставляет переменную, которую как раз и нужно менять не в хтмл а js. В общем надо управлять типом анимации в js. Так будет понятнее :) а уж попутно решится моя проблема - хтмл строка уменьшится после переноса типа анимации в js)) |
Цитата:
А зачем типы анимации нужны в js? Они и так все указаны в файле css что скачивается с сайта Но все равно сделал. В строчку и столбик. хтмл можно будет таким писать? <a href="#" class="toanimate tada">КНОПКА</a>или еще лучше таким? <a href="#" class="toanimate">КНОПКА</a>Только не привязывайте поиск классов только к ссылкам. Хочется использовать анимацию не только к тегу "a", а к любым обьектам. |
Часовой пояс GMT +3, время: 13:32. |