jQuery-Marquee работает только в Firefox
Я использую jQuery-Marquee для имитации эффекта marquee для "последнего твита" div. Но он работает только в Firefox. Он выводится правильно в Chrome, но шатер не прокручивается по какой-то причине. Кто-нибудь может помочь мне понять, что происходит?
HTML (это то, что выводит)
<div class="latest-tweets">
<ul class="sf-js-enabled">
<li>
<p class="tweet-text">
<div style="width: 100000px; margin-left: 0px;" class="js-marquee-wrapper">
<div class="js-marquee" style="margin-right: 0px; float: left;">RT <a class="twitter-screen-name" href="https://twitter.com/Kollaboration" target="_blank">@Kollaboration</a>: Angry Asian American, a new show from <a class="twitter-screen-name" href="https://twitter.com/angryasianman" target="_blank">@angryasianman</a> <a class="twitter-screen-name" href="https://twitter.com/jennyyangtv" target="_blank">@jennyyangtv</a> on <a class="twitter-screen-name" href="https://twitter.com/ISATVofficial" target="_blank">@ISATVofficial</a> Watch the first angry ep. here: http…<a href="http://twitter.com/ISATVofficial/status/447119023319162881" target="_blank">- 1 day ago</a>
</div>
</div>
</p>
</li>
</ul>
</div>
JavaScript (в нижнем колонтитуле фактического сайта)
<script src="jquery.marquee.min.js"></script>
<script>
jQuery(function () {
jQuery('.tweet-text').marquee({
pauseOnHover: true,
duration: 8000
});
});
</script>
CSS
.latest-tweets {
color: #ddd;
float: left;
line-height: 42px;
}
.latest-tweets ul {
height: 42px;
max-width: 550px !important;
overflow: hidden;
text-align: left;
}
.latest-tweets li {
cursor: pointer;
height: 42px;
}
.latest-tweets p {
display: inline;
margin-bottom: 0;
white-space: nowrap;
}
.tweet-text {
width: 550px;
overflow: hidden;
}
.tweet-details {
margin-left: 10px;
}
.tweet-details a {
text-transform: none !important;
}
1 ответ:
Похоже, что вы не можете применить плагин
marquee
, который вы используете, к элементам, которые являютсяdisplay: inline;
.Попробуйте удалить
display: inline;
на элементе<p class="tweet-text">
или изменить его наdisplay: block;
. Возможно, вам придется настроить некоторые другие CSS, чтобы учесть эту оговорку, но это должно исправить ее.