javascript - 为什么即使我已经包含了引用资料，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 bootstrap 引用。

Answer 1

你在 jquery 之后放了 marquee 了吗？我试过它有效

另请注意，您选择了#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>