Как правильно реализовать метод janu .animate (), используя внешний файл javascript? - PullRequest
Новая
       25

Как правильно реализовать метод janu .animate (), используя внешний файл javascript?

0 голосов
/ 14 мая 2019

В настоящее время я работаю над созданием профессионального портфолио для будущих рабочих мест. Я довольно новичок во всех концепциях, которые я практикую, и столкнулся с проблемой использования метода janu .animate (). Кажется, у меня нет проблем с использованием метода jQuery .css (), но как только я пытаюсь реализовать .animate (), ничего не происходит.

Поскольку я использую Bootstrap и Semantic вместе со своими собственными пользовательскими файлами CSS и javascript, я попытался изменить порядок расположения тегов CDN и Script, однако ничего не изменилось.

В настоящее время заказ:
В голове:
Bootstrap CSS CDN
Bootstrap js CDN
Семантический CSS CDN
Относительный пользовательский CSS

Перед закрывающим тегом body:
JQuery JS CDN
Поппер Джс CDN
Семантический js CDN
Относительный пользовательский js (где находится рассматриваемый код) 

<button class="ui green basic button" id="click">Click</button>
<div id="trans">
    <h4>Hello World</h4>
</div>

$('#click').click(function(){
    $('#trans').animate({
        width: "50%"
    }, 500, function(){
        alert("animated");
    });
});
This Does Nothing

$('#click').click(function(){
    $('#trans').css({
        width: "50%"
    });
});
This Works As Intended

Я бы ожидал, что после нажатия кнопки с id = "click", div с id = "trans" уменьшит ширину со 100% до 50% и выдаст предупреждение с надписью "анимированный", однако ничего не происходит вообще , Самое странное для меня это то, что если я использую метод .css () для изменения того же свойства, он работает безупречно, но без забавного анимационного вида.

Ответы [ 2 ]

0 голосов
/ 14 мая 2019

В HTML: 

<button class="ui green basic button" id="click">Click</button>
    <div id="trans" style="background-color: #f00;">
        <h4>Hello World</h4>
    </div>

В JavaScript 

$('#click').click(function(){
          $('#trans').animate({
              width: "50%"
          },500,function(){
            alert("animated");
          });
      });

Все выглядит хорошо. Проверить: codepen.io

Возможно, вы что-то изменили в файлах CDN.

0 голосов
/ 14 мая 2019

Вы уверены, что просто не видите этого?https://jsfiddle.net/xbLrpsk6/3/

Я установил несколько начальных CSS на #trans DIV 

#trans {
  background: red;
  display: block;
  width: 100%;
}
...