Как содержать JavaScript Math.random Animation в Div/Container? ⇐ Javascript

[Anonymous]

Я пытаюсь сдержать анимированные DOV в другом контейнере Div, используя команду Math.Random JavaScript на мыши. Это для сайта Squarespace. https://www.shayla-designs.com/home-1> Снимайтесь в правую сторону и с видимости. предварительный class = "Snippet-Code-JS Lang-JS PrettyPrint-Override">

Код: Выделить всё

jQuery(function($) {
$('#description1').mouseover(function() {
//var dWidth = $(document).width() - 100, // 100 = image width
//dHeight = $(document).height() - 100, // 100 = image height
var nextX = Math.floor(Math.random() * ($(this).parent().width() - $(this).width() - 1) + 1),
nextY = Math.floor(Math.random() * ($(this).parent().height() - $(this).height() + 1) - 1);
$(this).animate({
left: nextX + 'px',
top: nextY + 'px'
});
});
});

jQuery(function($) {
$('#description2').mouseover(function() {
//var dWidth = $(document).width() - 100, // 100 = image width
//dHeight = $(document).height() - 100, // 100 = image height
var nextX = Math.floor(Math.random() * ($(this).parent().width() - $(this).width() - 1) + 1),
nextY = Math.floor(Math.random() * ($(this).parent().height() - $(this).height() + 1) - 1);
$(this).animate({
left: nextX + 'px',
top: nextY + 'px'
});
});
});

jQuery(function($) {
$('#description3').mouseover(function() {
//var dWidth = $(document).width() - 100, // 100 = image width
//dHeight = $(document).height() - 100, // 100 = image height
var nextX = Math.floor(Math.random() * ($(this).parent().width() - $(this).width() - 1) + 1),
nextY = Math.floor(Math.random() * ($(this).parent().height() - $(this).height() + 1) - 1);
$(this).animate({
left: nextX + 'px',
top: nextY + 'px'
});
});
});

jQuery(function($) {
$('#description4').mouseover(function() {
//var dWidth = $(document).width() - 100, // 100 = image width
//dHeight = $(document).height() - 100, // 100 = image height
var nextX = Math.floor(Math.random() * ($(this).parent().width() - $(this).width() - 1) + 1),
nextY = Math.floor(Math.random() * ($(this).parent().height() - $(this).height() + 1) - 1);
$(this).animate({
left: nextX + 'px',
top: nextY + 'px'
});
});
});< /code>
body {
margin: 0;
padding: 0;
align: center;
background-color: teal;
}

#container {
width: auto;
height: 100px;
margin-left: auto;
margin-right: auto;
padding: 0px;
position: relative;
align-content: center;
}

#description1 {
position: relative;
}

#description2 {
position: relative;
}

#description3 {
position: relative;
}

#description4 {
position: relative;
}< /code>


Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Подробнее здесь: https://stackoverflow.com/questions/794 ... -container