Доброго времени суток, нашла интересный пример для создания бегущей строки, где текст сразу появлятся с обратного края не дожидаясь пока вся строка проползет. Пытаюсь к нему к нему добавит два события: чтобы при наведение мыши строка останавливалась, а при снятии наведения продолжалась анимация с того же места.
| Код |
<div id="marquee">
My Text My Text My Text My Text My Text My Text My Text
</div>
|
| Код |
$(function() {
var marquee = $("#marquee");
marquee.css({"overflow": "hidden", "width": "100%"});
marquee.wrapInner("<span>");
marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" });
marquee.append(marquee.find("span").clone());
marquee.wrapInner("<div>");
marquee.find("div").css("width", "200%");
var reset = function() {
$(this).css("margin-left", "0%");
$(this).animate({ "margin-left": "-100%" }, 6000, 'linear', reset).mouseover( function() {$(this).stop();}).mouseout( function() {
$(this).animate({ "margin-left": "-100%" }, 6000, 'linear', reset)
})
};
reset.call(marquee.find("div"));
});
|
Но при ухода курсора с объекта, строка бежит медленнее, вы бы не могли мне подсказать каким образом оставить туже скорость пробега строки ?
Заранее спасибо |