Question

我正在开发一款记忆游戏。当玩家匹配两张牌时，在点击匹配对的第二张牌后，两张牌通过按比例放大130％进行动画制作，同时在500毫秒内完成360％的完整旋转。我想要动画在那一点做的是暂停1秒然后自行反转（缩小到100％并在另外500毫秒内旋转-360％。我似乎无法找到合适的回调函数或使用关键帧或其他替代方法在整个过程中创建平滑的变换效果。

由于跨浏览器兼容性问题，我被要求使用jQuery而不是仅仅依赖于css。我已经在下面列出了我的代码。现在，我有最小的HTML，一些CSS和一些JavaScript。我也使用jQuery。如果有人能指出我正确的方向，我将非常感激。我还是所有代码语言的新手，因此首选简单的解释。

提前致谢！

<!DOCTYPE html>
<html>
<head>

<style>

body {
    background: linear-gradient(#2C1760, #D2D1DD);
    text-align:center;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    color:#fff;
}
div#symbols{
    margin:auto;
    width:1600px;
    display:none;
}

div#memory_board{
    background: linear-gradient(#D4BFF5, #8743DC);
    border:#999 1px solid;
    border-radius:10px;
    width:1290px;
    height:696px;
    padding: 15px 0px 0px 15px;
    margin:0px auto;
}
div#memory_board > div{
    background:url(MemoryCardFrontSmall.png) no-repeat;
    border:#FFF 2px solid;
    border-radius:12px;
    width:196px;
    height:156px;
    float:left;
    margin: 0px 14px 14px 0px;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.30);
    -ms-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.30);
    font-size:64px;
    cursor:pointer;
    text-align:center;
    -webkit-transition:-webkit-transform 0.5s ease-in-out;
    -moz-transition: transform 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}


</style>

<script src="jquery-1.11.1.min.js"></script>
<script>

// Scripted By Adam Khoury in connection with the following video tutorial: 
// http://www.youtube.com/watch?v=c_ohDPWmsM0


var memory_array = ['1.png','1.png','2.png','2.png','3.png','3.png','4.png','4.png','5.png','5.png','6.png','6.png','7.png','7.png','8.png','8.png','8.png','8.png','9.png','9.png','10.png','10.png','11.png','11.png','12.png','12.png'];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
Array.prototype.memory_tile_shuffle = function(){
    var i = this.length, j, temp;
    while(--i > 0){
        j = Math.floor(Math.random() * (i+1));
        temp = this[j];
        this[j] = this[i];
        this[i] = temp;
    }
}
function newBoard(){
    tiles_flipped = 0;
    var output = '';
    Clicks = -1;
    memory_array.memory_tile_shuffle();
    for(var i = 0; i < memory_array.length; i++){
        output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"></div>';
    }
    document.getElementById('memory_board').innerHTML = output;
}
function memoryFlipTile(tile,val){
    if(tile.innerHTML == "" && memory_values.length < 2){
        tile.style.background = '#FFF';
        tile.style.border = '2px solid #000';
        tile.innerHTML = '<img src="'+val+'" />';
        if(memory_values.length == 0){
            memory_values.push(val);
            memory_tile_ids.push(tile.id);
        } else if(memory_values.length == 1){
            memory_values.push(val);
            memory_tile_ids.push(tile.id);
            if(memory_values[0] == memory_values[1]){
                var tile_1 = document.getElementById(memory_tile_ids[0]);
                var tile_2 = document.getElementById(memory_tile_ids[1]);
                $(tile_1).css({transform: "scale(1.3) rotate(360deg)"});
                $(tile_2).css({transform: "scale(1.3) rotate(360deg)"});
                tiles_flipped += 2;
                // Clear both arrays
                memory_values = [];
                memory_tile_ids = [];
                // Check to see if the whole board is cleared
                if(tiles_flipped == memory_array.length){
                    if(Clicks < 90) { 
                        alert("Wow! Only " + Clicks + " clicks!};
                    else {
                        alert("Let's try that again. See if you can complete the game in less than " + Clicks + " clicks.");
                    }
                    document.getElementById('memory_board').innerHTML = "";
                    newBoard();
                }
            } 
            else {
                function flip2Back(){
                    // Flip the 2 tiles back over
                    var tile_1 = document.getElementById(memory_tile_ids[0]);
                    var tile_2 = document.getElementById(memory_tile_ids[1]);
                    tile_1.style.background = 'url(MemoryCardFrontSmall.png) no-repeat';
                    tile_1.style.border = '2px solid #FFF';
                    tile_1.innerHTML = "";
                    tile_2.style.background = 'url(MemoryCardFrontSmall.png) no-repeat';
                    tile_2.style.border = '2px solid #FFF';
                    tile_2.innerHTML = "";
                    // Clear both arrays
                    memory_values = [];
                    memory_tile_ids = [];
                }
                setTimeout(flip2Back, 700);
            }
        }
    }
}
</script>
</head>
<body>
<div>
    <h1>ADE Memory Game</h1>
    <p>Click or touch the squares to match the cards.</p>
</div>
<div id="memory_board">
</div>

<br>

<br>
<br>
<br>
<script>

    //Create a new gameboard
    newBoard();

</script>


</body>
</html>

Answer 1

使用.animate()为CSS更改设置动画。
- 使用duration参数使动画每次花费500毫秒。
- 使用complete参数设置动画，以便在动画完成后撤消动画。

所以喜欢

$(tile_1).animate({
  transform: "scale(1.3) rotate(360deg)"
}, 500, function() {
  $(this).animate({
    transform: "scale(1.0) rotate(0deg)"
  }, 500);
});

代表tile_1。使用类似的代码（或者更好的方法，将使用图块作为参数设置动画的函数）tile_2或您想要设置动画的任何其他图块。

如何使用css和jQuery在同一个单击中缩放div然后反转变换？

1 个答案: