Nano Hash - криптовалюты, майнинг, программирование

Анимированное изменение css (jQuery)

Я пытался применить плагин jQuery easing к .css и .animate, но не работал, не знаю почему, потому что обычно он работает. Пример кода:

$('#img').hover(function() {
    $(this).animate({"border-radius":"5px"}, 0, "easeOutBounce");
}, function() {
    $(this).animate({"border-radius":"75px"}, 0, "easeOutBounce");
});

Итак, в основном .animate (вместо .css, чтобы избежать проблем), но я также хочу установить продолжительность анимации и работать "easeOutBounce" или некоторые другие эффекты.

Теперь радиус границы анимируется на :hover, но без тайминга анимации.

Я не могу сделать это в css, а jQuery не работает, можно ли это как-то исправить?

Спасибо, Оливер.

animation jquery css easing easing-functions
05.01.2019

Ответы:


1

Я думаю, что синтаксис, который вы используете в своей анимации, неверен. Кроме того, вам нужно установить продолжительность> 0, если вы хотите что-то увидеть.

Не стесняйтесь изменять часть easing с помощью собственного плагина.

$('#img').hover(
  function() {
    $(this).animate({
      borderRadius: 75
    }, 300, 'easeOutBounce');
  },
  function() {
    $(this).animate({
      borderRadius: 5
    }, 300, 'easeOutBounce');
  }
);
#img {
  border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<img id="img" src="https://i.stack.imgur.com/Qk0jX.jpg">

05.01.2019
  • Спасибо, но эффект не работает... например, я хочу easyOutBounce, (gsgd.co. uk/sandbox/jquery/easing) и это не работает :/ . 06.01.2019
  • Возможно ли сделать этот эффект синхронизации ... в jquery? Если плагин не работает с .animate (не знаю почему) 06.01.2019
  • Привет @Oliver, я изменил смягчение на easeOutBounce, вы можете проверить мой фрагмент. 07.01.2019

    • 2

    Эта функция должна работать:

    $('#img').hover(
  function() {
    $(this).animate({
      borderRadius: 75
    }, 300, 'easeOutBounce');
  },
  function() {
    $(this).animate({
      borderRadius: 5
    }, 300, 'easeOutBounce');
  }
);
    19.02.2019

    3

    попробуйте изменить временные эффекты, такие как ease out bounce

    изменить его на ease in

    19.02.2019

    4

    Я пробовал образец, который работает так, как он есть.

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="block"></div>
<div class="block"></div>

$('div.block').hover(function(){
            $(this).animate({ borderRadius: '70px' }, 600, 'easeInBounce');
        },function(){
            $(this).animate({ borderRadius: '0px' }, 600, 'easeOutBounce');
        });
    07.01.2019
  • В чем разница с существующим ответом? 07.01.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..