Wie enthält ich JavaScript Math.Random -Animation in einem Div/Container? ⇐ JavaScript

[Anonymous]

Ich versuche, animierte Divs in einem anderen DIV -Container zu enthalten, während ich den Befehl mathematom JavaScript auf einem Mausover verwendete. Dies gilt für eine Squarespace -Site. https://www.shayla-designs.com/home-1
Ich brauche die weißen Blasen mit schwarzem Text, um in der Mitte der Seite zu bleiben, jetzt sie Gehen Sie zur rechten Seite und von der sichtbaren Seite aus. vor class = "snippet-code-js Lang-js hübschesPrint-override">

Code: Select all

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