我正在使用HTML，CSS和JavaScript / jQuery制作滑动拼图（类似this）。
一切正常，但我希望每次幻灯片移动时都添加一个滑动过渡。
代码基于以下逻辑工作：
<div>（取决于难易程度）。background-image，并相应裁剪以模拟＆＃34;＆＃34;原始图像。image，还有piece<number>，其中<number>是图块的编号。最后一个图块（piece12，piece16或piece48）也有一个voidBlock类，用于删除background-image。这是空的瓷砖，允许直接在它旁边的瓷砖移动到它的位置。所有其他图块都有一个额外的类imgBlock。当点击voidBlock旁边的其中一个图块时，它会与voidBlock交换类。例如，如果我们点击piece6，它恰好位于voidBlock旁边（让我们说难度设置为简单，因此voidBlock是{{ 1}}），这会发生：
piece12将其voidBlock课程更改为piece12。piece6将其voidBlock课程更改为voidBlock。imgBlock将其piece6课程更改为piece6。piece12将其piece6课程更改为imgBlock。之后，调用voidBlock函数;它设置每个图块的draw()，具体取决于其background-position个数字。
正如您现在可能已经猜到的那样，piece实际上并没有移动。他们仍然在<div> background-position通过他们的课程进行更改。
虽然我在编程方面有一些经验（即在Python和Java中），但对于我来说，Web开发一般都是新的。我尝试了各种转换方法，但我能想到的最好的方法是每次移动一块瓷砖时都会移动背景图像（这很奇怪而且不直观）。
我的问题是，因此：是否有任何方法可以在每次移动时滑动动画/过渡？
（注释掉的行与问题无关）
CSS：
background-image文件的一部分：
main.css
的JavaScript / jQuery的：
.image {
background-image: url(/Users/user/puzzle-test/img/image001.jpg);
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
margin: 10px 10px 10px 10px;
}
.voidBlock {
background-image: none;
}
.imgBlock {
background-image: url(/Users/user/puzzle-test/img/image001.jpg);
}
点击处理程序：
<div> var clickHandler = function() {
var voidPosX = $(".voidBlock").css("left");
var voidPosY = $(".voidBlock").css("top");
voidPosX = parseInt(voidPosX.substring(0, voidPosX.length-2));
voidPosY = parseInt(voidPosY.substring(0, voidPosY.length-2));
var posX = $(this).css("left");
var posY = $(this).css("top");
posX = parseInt(posX.substring(0, posX.length-2));
posY = parseInt(posY.substring(0, posY.length-2));
if((voidPosX == posX - finalWidth) && (voidPosY == posY)){
posX -= finalWidth;
voidPosX += finalWidth;
move($(this));
}else if((voidPosX == posX + finalWidth) && (voidPosY == posY)){
posX += finalWidth;
voidPosX -= finalWidth;
move($(this));
}else if((voidPosY == posY - finalHeight) && (voidPosX == posX)){
posY -= finalHeight;
voidPosY += finalHeight;
move($(this));
}else if((voidPosY == posY + finalHeight) && (voidPosX == posX)){
posY += finalHeight;
voidPosY -= finalHeight;
move($(this));
}
}
函数（在点击处理程序中使用）（move和h是拼图的水平和垂直维度）：
v function move(element) {
//moveCounter++;
var temp = element.attr("class").split(" ");
for(var i = 0; i < temp.length; i++){
if(temp[i].substring(0, 5) == "piece"){
var pieceNum = temp[i].substring(5);
}
}
element.addClass("tempBlock1");
$(".voidBlock").addClass("tempBlock2");
element.filter(".tempBlock1").addClass("piece"+(h*v));
element.filter(".tempBlock1").removeClass("piece"+pieceNum);
element.filter(".tempBlock1").addClass("voidBlock");
element.filter(".tempBlock1").removeClass("imgBlock");
$(".voidBlock").filter(".tempBlock2").addClass("piece"+pieceNum);
$(".voidBlock").filter(".tempBlock2").removeClass("piece"+(h*v));
$(".voidBlock").filter(".tempBlock2").addClass("imgBlock");
$(".voidBlock").filter(".tempBlock2").removeClass("voidBlock");
$(".tempBlock1").removeClass("tempBlock1");
$(".tempBlock2").removeClass("tempBlock2");
draw();
}
功能（数字800和600代表图像的尺寸）：
draw最后，function draw() {
//var imgSelect = $("input[type='radio'][name='bgImage']:checked").val();
var j = 1;
for(var pY = 0; pY > -600; pY -= finalHeight){
for(var pX = 0; pX > -800; pX -= finalWidth){
$(".piece"+j).css("background-position", pX+"px "+pY+"px");
//$(".piece"+j).css("background-image", "url(/Users/user/puzzle-test/img/"+imgSelect+".jpg)");
//$(".piece"+j).find(".helpNum").text(j);
j++;
}
}
//$(".move").text("Moves: " + moveCounter);
$(".voidBlock").css("background-image", "none");
//$(".grid").find("img").attr("src", "img/"+imgSelect+".jpg");
//$(".image:not(.voidBlock)").css("cursor", "pointer");
//$(".voidBlock").css("cursor", "default");
}
s由<div>函数创建，就像这样（shuffle是拼图块的混洗数组，主要用于告诉每个磁贴的位置） ：
pieces答案 0 :(得分：0)
我终于解决了这个问题，感谢@BillyNate的答案，即将position s的<div>属性设置为绝对值，然后通过更改{{1}来移动它们}和top属性。