Почему JQuery Marquee не работает, даже если я включил ссылки?

Question

У меня есть этот div.

Я хочу, чтобы это было в шатре, но оно не двигается. Нет ошибки консоли и ничего. Я добавил jquery и css, но все еще не работает.

$('#marquee').marquee({
  //speed in milliseconds of the marquee
  duration: 10000,
  //gap in pixels between the tickers
  gap: 50,
  //time in milliseconds before the marquee will start animating
  delayBeforeStart: 0,
  //'left' or 'right'
  direction: 'left',
  //true or false - should the marquee be duplicated to show an effect of continues flow
  duplicated: true
});

<style type="text/css">.marquee {
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.marquee@1.5.0/jquery.marquee.min.js"></script>

<div class="col-auto d-none d-lg-block" style="margin-left: -9.5%;">
  <span class="fa fa-map-marker color-warning fw-800 icon-position-fix"></span>
  <p class="ml-2 mb-0 fs--1 d-inline color-white fw-700" id="marquee">
    ashdasdbkasbdkasbdkasjbdkabsdkbaskdbabsdaskjbdkasbdkasbdkasbdkasbdkasjdbaskbd asndbaskdjbaskdbaskjbdkjbasdjbasjdbjaskjdbaskjdbasdbkabsdjasd ahsdjashdkjashdkhasdkjashdkjasdhaskjdhashdkjasdasdhasd ahsdkjasdhkasjdhasdhasdasdasdasdkasd
  </p>
</div>

Я добавил ссылки для начальной загрузки jquery и css вверху страницы.

Answer 1

Вы ставили шатер после jquery. Я пытался это сработало

Также обратите внимание, что вы выбираете #marquee, но в css вы устанавливаете .marquee

$('#marquee').marquee({
            //speed in milliseconds of the marquee
            duration: 10000,
            //gap in pixels between the tickers
            gap: 50,
            //time in milliseconds before the marquee will start animating
            delayBeforeStart: 0,
            //'left' or 'right'
            direction: 'left',
            //true or false - should the marquee be duplicated to show an effect of continues flow
            duplicated: true
        });

#marquee {
        width: 300px;
        overflow: hidden;
        border: 1px solid #ccc;
        background: #ccc;
    }

<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.Marquee/1.5.0/jquery.marquee.min.js"></script>


<div class="col-auto d-none d-lg-block" style="margin-left: -9.5%;">
                <span class="fa fa-map-marker color-warning fw-800 icon-position-fix"></span>
                <p class="ml-2 mb-0 fs--1 d-inline color-white fw-700" id="marquee">
                    ashdasdbkasbdkasbdkasjbdkabsdkbaskdbabsdaskjbdkasbdkasbdkasbdkasbdkasjdbaskbd
asndbaskdjbaskdbaskjbdkjbasdjbasjdbjaskjdbaskjdbasdbkabsdjasd
ahsdjashdkjashdkhasdkjashdkjasdhaskjdhashdkjasdasdhasd
ahsdkjasdhkasjdhasdhasdasdasdasdkasd
                </p>
            </div>

Answer 2

У вас есть marquee как id, но в файле css вы рассматриваете как класс .marquee.Вместо этого удалите атрибут id и добавьте marquee в класс, чтобы применить css.

$('.marquee').marquee({
    //speed in milliseconds of the marquee
    duration: 10000,
    //gap in pixels between the tickers
    gap: 50,
    //time in milliseconds before the marquee will start animating
    delayBeforeStart: 0,
    //'left' or 'right'
    direction: 'left',
    //true or false - should the marquee be duplicated to show an effect of continues flow
    duplicated: true
});

.marquee {
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
}

<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.Marquee/1.5.0/jquery.marquee.js"></script>  
<div class="col-auto d-none d-lg-block" style="margin-left: -9.5%;">
    <span class="fa fa-map-marker color-warning fw-800 icon-position-fix"></span>
    <!-- marquee as class -->
    <p class="ml-2 mb-0 fs--1 d-inline color-white fw-700 marquee"> 
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, veritatis.
    </p>
</div>