I'm having an issue with Velocity.

Я создал анимированный логотип для компании, для которой я делаю некоторый редизайн, когда я перенес его в HTML-код целевой страницы сайта и предварительно просматривал его, анимация не запускалась. Я A / Bd много чего и заменил вызов загрузки документа на кнопку, чтобы упростить тестирование, затем я взял функциональный код из Codepen, который я использовал, и скопировал его в jsfiddle, который не работал.

Все проверил, такие же точные настройки и библиотеки. Я пробовал перемещать jQuery, Velocity и мой код анимации между головой и телом в каждом варианте и последовательности.

http://codepen.io/JTBennett/pen/WrRwWP
Функционирование

https://jsfiddle.net/6zjc98g1/1/
Не работает

Вот код, который я написал:

$( ".anbutton1" ).click(function() {

  $(".anpetal").velocity(
    "transition.expandIn", 
              {stagger: 5, drag:true, duration:1000}
  ).delay(4000)

  $(".anwords").velocity(
    "transition.expandIn", 
              {stagger: 65, drag:true, duration:1000}
  ).delay(4000)

});

If I can get it to start working in the jsfiddle, I'll be very happy.

Joel

Ответов: 1

Ответы (1)

Прочитать консоль:

Смешанное содержимое: страница с адресом «https://fiddle.jshell.net/_display/» была загружена по HTTPS, но запросил небезопасный сценарий «http://cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js». Этот запрос заблокирован; контент должен обслуживаться через HTTPS.

tl; dr

Ваша ссылка jsfiddle размещается по HTTPS, а Codepen размещается по HTTP (небезопасно).

Измените свой скрипт на https: //, и он будет работать.
https://jsfiddle.net/DerekL/bpcLn6rb/

Или, если хотите, просто загрузите jsFiddle через HTTP, и он также будет работать должным образом.


enter image description here

Также не забудьте изменить его на onLoad или onDomready, чтобы ваш код jQuery выполнялся правильно.

2022 WebDevInsider