повторить затухание / затухание в пользовательской функции jquery, избегая интервала или тайм-аута - PullRequest
Новая
       50

повторить затухание / затухание в пользовательской функции jquery, избегая интервала или тайм-аута

2 голосов
/ 05 мая 2020

Я новичок в jQuery, и я не могу понять, как заставить мой код повторять одни и те же задачи снова.

Я пытаюсь сделать следующее:

  • Я выбираю случайные строки из набора различных массивов
  • с помощью настраиваемой функции jquery, я затемняю несколько из этих текстовых битов в случайных местах на экране, каждый в несколько разное время (перекрытие текста в порядке). Еще я меняю размер шрифта.
  • В принципе, я хотел бы повторять этот процесс до бесконечности, т.е. выбрать новый набор случайных строк из тех же массивов, постепенно их увеличивать и уменьшать в случайных позициях

Мой вопрос ( s):

  1. Могу ли я повторить процесс, избегая setInterval и setTimeout, и если да, то как?

Если у вас есть лишняя минута, я также буду признателен за помощь со следующим:

Как мне настроить свои позиции (posx и posy), чтобы текст не выходил за пределы экрана (т.е. пользователь мог видеть его без прокрутки)? Есть ли какие-либо проблемы с кодом, который я должен быть в курсе? Где я могу это улучшить?

Мой html: 

    <span id="one"></span>
    <span id="two"></span>
    <span id="three"></span>
    <span id="four"></span>
    <span id="five"></span>

Мой сценарий: 

$( document ).ready(function() {

var cT1 = ["Apples", "Oranges", "Strawberries", "Blueberries", "Bananas"];
var cT2 = ["Maccaroni", "Tortellini", "Spaghetti", "Fettucine", "Tangliatelle"];
var cT3 = ["New York", "Paris", "Rome", "Berlin", "London"];
var cT4 = ["Labrador", "Coonhound", "Beagel", "Bernese Mountaindog", "Pittbull"];
var cT5 = ["Triceratops", "Stegosaurus", "Tyrannosaurus Rex", "Brachiosaurus", "Ankilosaurus"];

jQuery.fn.extend({
customFunction : function (cT, predelay, fadeintime, delaytime, fadeouttime, maxSize, minSize){     

var posy = (Math.random() * ($(document).height() -$(this).height())).toFixed();
var posx = (Math.random() * ($(document).width() - $(this).width())).toFixed();
var emptytime = predelay + fadeintime + delaytime + fadeouttime;

var fader = $(this)
.hide()
.text(cT[Math.floor(Math.random()*cT.length)])
.delay(predelay).fadeIn(fadeintime)
.css({
    'position':'absolute',
    'left':posx+'px',
    'top':posy+'px',
    'font-size': (Math.random()*maxSize+minSize)+'px'
    })
.delay(delaytime)
.fadeOut(fadeouttime);

setTimeout(function(){$(this).empty();},emptytime);

return fader; 
}
});

$('#one').customFunction(cT1, 0, 4000, 2000, 4000, 40, 15);
$('#two').customFunction(cT2, 2000, 3000, 5000, 3000, 50, 20);
$('#three').customFunction(cT3, 4000, 4000, 1000, 4000, 60, 25);
$('#four').customFunction(cT4, 500, 3000, 1000, 3000, 45, 20);
$('#five').customFunction(cT5, 5000, 4000, 2000, 4000, 55, 30);
});

Большое спасибо за вашу помощь, я ценю любые отзывы.

...