I'm trying to animate an image move to the middle of the screen, zoom in, and become fixed when pressed, and then go back to where it was before when let go. However, the height and width are not changing at all, and when I let go, the image permanently moves one width to the right.
Basically, I detect where it is relative to the screen, and change it to position:fixed while moving it to that location. Then, I animate it to the middle. On mouseup, it detects where a reference div is relative to the screen, animates it to that location, and then switches it back to position:relative and then changes the position to the original relative position.
It also only moves to the right when it's inside of another element, but the width and height are never animated no matter what.
function animation(thing) {
var element = document.getElementById(thing);
var refname = thing + "ref"
ref = document.getElementById(refname);
console.log(ref);
var scale = 3;
style = window.getComputedStyle(ref),
ogTopR = style.getPropertyValue('top');
ogLeftR = style.getPropertyValue('left');
console.log("ogLeft Top R: " + ogLeftR + ", " + ogTopR);
const rect = ref.getBoundingClientRect();
var ogTopF = rect.top - 18 + "px";
var ogLeftF = rect.left - 8 + "px";
console.log("ogLeft Top F: " + ogLeftF + ", " + ogTopF);
style = window.getComputedStyle(element),
width = style.getPropertyValue('width');
height = style.getPropertyValue('height');
console.log("width, height: " + width + ", " + height);
var newwidth = width.slice(0, -2);
var newheight = height.slice(0, -2);
newWidth = newwidth * scale + 'px';
newHeight = newheight * scale + 'px';
console.log("newwidth, newheight: " + newWidth + ", " + newHeight);
var marginLeft = ((newwidth) / 2) * -1 + 'px';
var marginTop = ((newheight) / 2) * -1 + 'px';
$(element).mousedown(function() {
$(this).css('position', 'fixed');
$(this).css('left', ogLeftF);
$(this).css('top', ogTopF);
$(this).css('width', width);
$(this).css('height', height);
$(this).animate({
left: '50%',
top: '50%',
width: newWidth,
height: newHeight,
marginLeft: marginLeft,
marginTop: marginTop
});
});
$(element).mouseup(function() {
$(this).css('left', '50%');
$(this).css('top', '50%');
$(this).css('width', newWidth);
$(this).css('height', newHeight);
$(this).animate({
left: ogLeftF,
top: ogTopF,
width: width,
height: height,
marginLeft: '0px',
marginTop: '0px'
});
$(this).css('left', '0px');
$(this).css('top', '0px');
$(this).css('position', 'relative');
});
}
animation("doghuh");
body {
background: black url(spacebackground.gif) repeat top left;
background-size: 456px 351px;
color: white;
font-family: "vt323";
width: 100vw;
height: 300vh;
}
#container1 {
position: absolute;
left: calc(50vw - calc(var(--con-size) / 2));
top: 50px;
width: var(--con-size);
height: var(--con-size);
display: grid;
grid-template-columns: auto auto;
background: url(midshade.png) center repeat, url(topshade.png) left top no-repeat, url(bottomshade.png) left bottom no-repeat, #ababab;
background-size: var(--con-size) var(--con-size), var(--con-size) var(--con-size), var(--con-size) var(--con-size);
}
.artwork {
style: inline-block;
position: relative;
left: 0;
top: 0;
filter: drop-shadow(6px 6px 6px black);
margin: 10px;
max-width: calc(var(--half-con-size) - 20px);
max-height: calc(var(--half-con-size) - 20px);
z-index: 1;
border: 0;
}
.refs {
position: relative;
background-color: pink;
margin: 10px;
width: 5px;
height: 5px;
z-index: 2;
}
#doghuh {
width: calc(var(--half-con-size) - 20px);
height: calc(var(--half-con-size) - 20px);
background: url(dog/doghuh.jpg) left top no-repeat;
background-size: calc(var(--half-con-size) - 20px) calc(var(--half-con-size) - 20px);
grid-area: 1 / 1;
}
#doghuhref {
grid-area: 1 / 1;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing Testing 123</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="icon" type="image/x-icon" href="favicon.png">
</head>
<body>
<a id="backbutton" href="index.html" rel='noreferrer'> </a>
<div id="container1">
<div class="refs" id="doghuhref"> </div>
<img class="artwork" id="doghuh">
</div>
</body>
</html>
