1
Текущий сценарий:Правильный способ написать идеальный анимации с помощью JQuery
У меня есть список divs, который содержит набор элементов, которые Свитки автоматически на основе количества divs настоящего. Этот список divs размещен внутри parentdiv и с фиксированным height.
Требование:
- Не анимировать т.е. свиток, если длина
divsнастоящих внутри меньше 4. - Animate с одинаковой скоростью до последнего
divи прокрутить назад от дна до верхних тисков наоборот. - Остановить прокрутку при наведении указателя на любого ребенка
div.
Выполнено:
- скроллинг делается т.е., если оно меньше, чем 4 элемента присутствуют не прокрутки.
- Прокрутка останавливается при наведении любого ребенка
div. - Анимация до нижнего элемента и начало с начала.
Проблемы, стоящие в настоящее время:
- скроллинг не бывает одинаковой скоростью. Он начинается медленно, увеличивает скорость и заканчивается медленно.
- После наведения, который останавливает прокрутку, когда он начинается снова, он снова начинает медленно.
- Как только вы достигли конца, он остается там на несколько секунд, а затем начинается с начала.
HTML
<div id="events_partial" class="container body-content col-md-12 col-lg-12 set-max-height">
<div class="row sec-container" id="secContainer">
<div style="top: -550.242px; opacity: 1;" id="secDetails">
<div class="container">
<p><h3><strong> Program in Place 1 on 11/22/2015</strong></h3></p>
<p>
Program Description which is a very long text on document and it can be more than 2 lines
</p>
</div>
<div class="container">
<p><h3><strong> Program in Place 1 on 11/22/2015</strong></h3></p>
<p>
Program Description which is a very long text on document and it can be more than 2 lines
</p>
</div>
<div class="container">
<p><h3><strong> Program in Place 1 on 11/22/2015</strong></h3></p>
<p>
Program Description which is a very long text on document and it can be more than 2 lines
</p>
</div>
<div class="container">
<p><h3><strong> Program in Place 1 on 11/22/2015</strong></h3></p>
<p>
Program Description which is a very long text on document and it can be more than 2 lines
</p>
</div>
<div class="container">
<p><h3><strong> Program in Place 1 on 11/22/2015</strong></h3></p>
<p>
Program Description which is a very long text on document and it can be more than 2 lines
</p>
</div>
<div class="container">
<p><h3><strong> Program in Place 1 on 11/22/2015</strong></h3></p>
<p>
Program Description which is a very long text on document and it can be more than 2 lines
</p>
</div>
<div class="container">
<p><h3><strong> Program in Place 1 on 11/22/2015</strong></h3></p>
<p>
Program Description which is a very long text on document and it can be more than 2 lines
</p>
</div>
<div class="container">
<p><h3><strong> Program in Place 1 on 11/22/2015</strong></h3></p>
<p>
Program Description which is a very long text on document and it can be more than 2 lines
</p>
</div>
</div>
</div>
</div>
CSS
#events_partial {
min-height: 385px !important;
margin-top: 57px;
overflow: hidden;
}
.set-max-height {
max-height: 385px !important;
padding-top: 30px !important;
}
.sec-container {
overflow: hidden !important;
min-height: 200px;
}
#secDetails {
position: absolute;
margin-top: 0px;
}
JS
var animateTime = 50000; //kept varying time because as number of items increases the speed time decreased
var shouldAnimate = true;
if ($("#secDetails .container").length < 4) {
shouldAnimate = false;
}
if ($("#secDetails .container").length >= 4 && $("#secDetails .container").length < 9)
animateTime = 10000;
function marqueePlay() {
if (shouldAnimate) {
$("#secDetails").animate(
{
top: $("#events_partial").height() - $("#secDetails").height(),
opacity: 1
}, animateTime, function() {
$("#secDetails").css("top", 1);
$("#secDetails").css("opacity", 1);
marqueePlay();
});
}
}
marqueePlay();
$("#secDetails").hover(function() {
$(this).stop(); //Stop the animation when mouse in
},
function() {
marqueePlay(); //Start the animation when mouse out
});
Любая помощь очень ценится.
кажется проблемой 'облегчения'. [[Ссылка] (http://api.jquery.com/animate/)] и [[Ссылка] (http: //api.jqueryui.com/easings /)] должен помочь, я думаю. –