Почему мой Div движется вправо при наведении курсора мыши? ⇐ Jquery

[Anonymous]

Я пытаюсь анимировать перемещение изображения в середину экрана, увеличение масштаба и фиксацию при нажатии, а затем возвращение туда, где оно было раньше, когда его отпустят. Однако высота и ширина вообще не меняются, и когда я отпускаю, изображение постоянно перемещается на одну ширину вправо.
По сути, я определяю, где оно находится относительно экрана, и изменяю его на положение: фиксированное, перемещая его в это место. Затем я анимирую его в середину. При наведении курсора мыши он определяет, где находится ссылочный элемент div относительно экрана, анимирует его в этом месте, а затем переключает его обратно на позицию: относительное, а затем меняет положение на исходное относительное положение.
Он также перемещается вправо только тогда, когда находится внутри другого элемента, но ширина и высота никогда не анимируются, несмотря ни на что.

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

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;
}

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

Testing Testing 123








[url=index.html] [/url]

Подробнее здесь: https://stackoverflow.com/questions/798 ... on-mouseup