旋转画布仅在第一次有效

Question

我试图在每次鼠标悬停时旋转画布，但它只是第一次工作。
你可以在这里玩一下： http://jsfiddle.net/h3Z7j/2/

我的原因将其旋转 0 度是为了在加载时将其转换为画布，因为我是第一次加载 img。

旋转脚本：http:// code.google.com/p/jquery-rotate/downloads/detail?name=jquery.rotate.1-1.js

<div class="gameboard">
    <img width="40" height="40" id="1-1" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
    <img width="40" height="40" id="2-1" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
    <img width="40" height="40" id="1-2" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
    <img width="40" height="40" id="2-2" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
</div>

$(document).ready(function () {
    $(".gameboard img").each(function () {
        $(this).rotateLeft(0);
    });
    $(".gameboard canvas").mouseover(function () {
        $(this).rotateLeft();
    });
});  

编辑
如果有其他更好的轮换脚本，我会很乐意更改为该脚本。

Answer 1

基于 Rory 的答案，您可以通过在 mouseover/mouseout 上将标志设置为 true/false 来实现每次鼠标悬停旋转一圈：

$(document).ready(function () {
    var stopSpin = false;
    $(".gameboard img").each(function () {
        $(this).rotateLeft(0);
    });
    $(".gameboard").delegate('canvas', 'mouseover', function () {
        if (!stopSpin){
            $(this).rotateLeft();
        }
        stopSpin = true;
    });
    $(".gameboard").delegate('canvas', 'mouseout', function () {
        stopSpin = false;
    });
});

请参阅： http: //jsfiddle.net/CK5hh/

Answer 2

问题是因为 canvas 元素被删除，然后读取到 DOM。然后，这将丢失放置在其上的 mouseover 处理程序。如果您使用 delegate 附加事件，它会起作用：

$(document).ready(function () {
    $(".gameboard img").each(function () {
        $(this).rotateLeft(0);
    });
    $(".gameboard").delegate('canvas', 'mouseover', function () {
        $(this).rotateLeft();
    });
});

虽然我不确定效果是否正是您想要的:)

小提琴示例