• 0
aqua.77

Использовать трансформацию в анимации JQuery

    Вопрос

    aqua.77

    Как применить трансформацию через анимацию JQ

    $('.abz span:last').click(function(){
            $('.w').animate({
              transform:  'scale(.9)'
            });
        });  

     

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    10 ответов на этот вопрос

    Рекомендуемые сообщения

    • 0
    Alexandr37

    Transform нельзя анимировать , вот такой вариант можно использовать :  https://jsfiddle.net/ez4jb67t/1/ .

    • Like 1

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    aqua.77
    1 час назад, Alexandr37 сказал:

    Transform нельзя анимировать , вот такой вариант можно использовать :  https://jsfiddle.net/ez4jb67t/1/ .

    Transform нельзя анимировать? https://jsfiddle.net/ez4jb67t/2/

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    BrusSENS
    2 часа назад, aqua.77 сказал:

    Как применить трансформацию через анимацию JQ

    Я один не догнал зачем это делать на jQuery? В чём профит?

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Alexandr37

     

    28 минут назад, aqua.77 сказал:

    Transform нельзя анимировать? https://jsfiddle.net/ez4jb67t/2/

    css  и jquery  если что разные вещи. А вопрос был про jquery .

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    aqua.77
    1 час назад, BrusSENS сказал:

    Я один не догнал зачем это делать на jQuery? В чём профит?

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

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Alexandr37

    http://forum.jquery.com/topic/using-animate-with-transform#14737000003616365

    • Like 1

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    aqua.77
    1 час назад, Alexandr37 сказал:

     

    css  и jquery  если что разные вещи. А вопрос был про jquery .

    Значит transform применить с анимации jQuery не выйдет? Всё спасибо. Буду использовать первый ответ.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Alexandr37

    Получается, что нельзя. Вот тут все почитать на русском можно : https://jquery-docs.ru/animate/

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    BrusSENS
    37 минут назад, aqua.77 сказал:

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

    Причём тут анимация в одном месте? Ошибка всех начинающих разработчиков в том, что не думают о том, как на клиенте это может отобразиться. А перегрузка "различными анимациями" на jQuery - жуткие тормоза на некоторых устройствах. Можете сделать анимацию на CSS - делайте на CSS. Начинайте сразу думать над используемой клиентом памятью. Учитесь оптимизировать задуманное, что бы потом не оптимизировать код.

    • Like 1

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    by chris

    @aqua.77, погугли про animate.css. В настоящем для анимирования яваскрипт нужен только для оперирования классами.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас

    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google

    • Похожие публикации

      • VeraVostro
        Автор: VeraVostro
        При настройке Masonry возникает проблема:

        ширина блоков регулируется отлично (и в %, и в px), но, когда возникла необходимость сделать один из блоков в 2 раза выше остальных блоков - низкие блоки не занимают пустое место рядом с высоким блоком и получается то что на картинке ниже.
        Перепробовала, как мне кажется, все: в инициализации указывала ширину колонки в пикселях, в процентах, добавляла в код grid-sizer, убирала grid-sizer...........

        Методом тыка поняла что если увеличить у меня в css ширину блока .grid-item - то колонок становится две - и в таком случае Masonry красиво все располагает.

        Код здесь (постаралась оставить только суть).

      • AstakhovaTA
        Автор: AstakhovaTA
        Группа компаний, оказывающих финансовые услуги закордонным клиентам очень ждет опытного фронтенда, который готов влиться в нашу небольшую команду московского офиса. В Вашей зоне ответственности будут мультиязычные сайты (в т.ч. RTL), лэндинги, прототипы мобильных приложений, взаимодействие с копирайтерами, участие в проектах развития. Что хотелось бы увидеть в Вашем портфолио и жизнеописании:
        • Отличное владение HTML5, CSS3, JavaScript, jQuery, php, MySQL и SQL, Bootstrap (3-4)
        • Опыт кроссбраузерной и адаптивной/"отзывчивой"(responsive) верстки, понимание специфики работы различных браузеров.
        • Опыт работы с системой контроля версий (Mercurial или др).
        • Знание английского языка (не ниже upper intermediate).
        Как плюс - владение графическими пакетами Adobe, хороший вкус и полиглотство!

        У нас уютный зеленый офис с кухонькой, душем и качелями недалеко от М.Красносельская/Бауманская в недавно перестроенном под офисный центр здании XIX века, коллеги, подставляющие плечо, а не ножку, 100%ая оплата больничных, и амбициозные планы по развитию нашей глобальной экспансии, которая напрямую связана с ИТ-функционалом. Так что наш фронтенд, действительно, всегда будет на "переднем фронте" поддерживать все стратегические проекты! 

        Ждем Ваше CV и ссылки на портфолио на адрес [email protected] с пометкой в теме "html forum". 
        Татьяна
         
      • Ferensy
        Автор: Ferensy
        Добрый день. Есть задача сделать анимацию как в примере по ссылке (видео на Youtube.com) - 
        С подобным ни разу не сталкивался, но ужасно хочется понять, как это реализуется. Я не прошу готового решения, я лишь прошу чтоб меня направили в ту сторону, в которой можно в этом разобраться. Спасибо.
    • advertisement_alt
    • advertisement_alt
    • advertisement_alt