Javascript 需要帮助添加/修改我的脚本以使用jquery和css包含一些旋转吗

这是小提琴：

我想让你在下面的图片中看到的唱片上的唱针在用户点击播放按钮时旋转到唱片上（参见小提琴）

针的位置不一定是最终的，我可能希望它位于右上角（我已经在底部包含了所需的图像和css）

现在，如果你点击播放（参见小提琴，将鼠标悬停在其中一张唱片封面上，点击播放），唱片指针从左侧进入，然后如果你点击同一张唱片上的停止，它会回到左侧。如果在停止播放另一张唱片之前单击“播放”，它将停留在同一位置

我希望它像下面的图像，它总是显示，但不是在记录上，除非你点击播放按钮，然后它旋转。然后，如果您在另一张唱片当前播放时单击“播放”，它就会像其变化一样移动。当然，如果你点击“停止”，它就会退出记录

以下是我当前的脚本：

$(function(){
var station = $('.player-station'),
    record = $('.record2:first'),
    playBtns = $('.play'),
    info = $('.nprecinfo');
var isPlaying = false;

playBtns.click(function()
{
    var btn = $(this);
    if(btn.text() == 'STOP')
    {
        btn.text('PLAY');
        record.css({'-webkit-animation-play-state': 'paused',
                    '-moz-animation-play-state': 'paused'});

        $('#needle').show().animate({"left": "-=120px"}, "slow");
        isPlaying = false;     

        return;
    };

    playBtns.text('PLAY');
    var album = btn.closest('.album');
    station.text(album.find('h3').text());
    info.text(album.find('.recordinfo').text());
    record.css({'-webkit-animation-play-state': 'running',
                '-moz-animation-play-state': 'running'});
    if (isPlaying == false)
    {
    $('#needle').show().animate({"left": "+=120px"}, "slow");
    isPlaying = true;
    }

     $('#lrvinyl').css("background-image","url("+btn.attr('rel')+")");
     $('#lrvinyl').hide().fadeIn();

    btn.text('STOP');
});
});

下面是记录针的当前css：

#needle {
background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle2.png);
background-repeat: no-repeat;
width:220px;
height:220px;
position:absolute;
left:-115px;
top:185px;
z-index:10;
overflow:hidden;
}

如果你想把针放在右上角，这里是图片和css，用于小提琴。您可能需要稍微移动记录

（.record2）

，因此只需将css更改为

左：-4px

+1详细问题！：）

您已经依赖css3来制作旋转光盘，而且由于这在css转换中是完全可行的，所以使用javascript所需要做的就是添加/删除一个类

演示：

这就是我添加的内容（加上一些供应商前缀）

css

jquery

从
.animate（…）
更改为
.removeClass（）
和
.addClass（）
调用

我也改变了#针css一点，以便从针手的左侧旋转，但是你可以看到

编辑

抱歉，我错过了关于在记录更改之间设置动画的部分。您可以做的一件事是删除该类，然后在延迟后将其添加回，如下所示：
我认为这应该会产生预期的效果

要使指针正确旋转，需要设置变换原点


当然，您需要修改速度/百分比

    #needle {
    background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle2.png);
    background-repeat: no-repeat;
    width:220px;
    height:220px;
    position:absolute;
    top:185px;
    z-index:10;
    overflow:hidden;
}

#needle.playing {
    -webkit-animation-name: needle_move;
    -webkit-animation-duration:8s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
    -webkit-transform-origin: 0px 10px;
    -webkit-transform: rotate(0deg);
    -webkit-transition: all .2s;
       -moz-transition: all .2s;
            transition: all .2s;
}

@-webkit-keyframes needle_move {
    0% {
       -webkit-transform: rotate(0deg);
    }
    50% {
       -webkit-transform: rotate(-15deg);
    }
    70% {
       -webkit-transform: rotate(-15deg);
    }
    0% {
       -webkit-transform: rotate(0deg);
    }
}

这里有一个使用画布的演示，可以获得您在问题中想要的针动画


由于供应商前缀垃圾CSS3和缺少对旋转点的浏览器支持。我觉得去帆布店比较干净。
这对我来说还是第一次。。做得真漂亮。非常干净，只是评论说效果看起来真的很好！你知道我现在有多谢你，因为你太棒了！我想你可以在针位于右上角的地方做，就像在我的详细问题中，我已经给了你所需要的一切！万分感谢@benlevywebdesign你可以使用完全相同的概念，看看@CarlosLombarte你没有看到上面那个人的小提琴吗？他们答对了我的问题！您没有更改任何动画，因为这是我以前所做的。@xec现在，当用户在停止当前播放的记录之前单击另一个记录上的播放时，我如何添加一些动画/旋转。可能只是稍微移动/移动旋转角度或多或少，就像在10度播放一样，然后让它转到15度或5度。很好的尝试，但这与我添加动画的原始小提琴完全不同。@benlevywebdesign-我简化/提炼了它，因为你的原始小提琴有大量HTML、CSS、，这和你的问题无关。使用原始版本，将来发现这个问题的人很难从中学到任何东西（不仅仅是复制和粘贴）。
#needle
    transition: all .2s ease;
}
#needle.playing {
    transform: rotate(-10deg);
}

    #needle {
    background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle2.png);
    background-repeat: no-repeat;
    width:220px;
    height:220px;
    position:absolute;
    top:185px;
    z-index:10;
    overflow:hidden;
}

#needle.playing {
    -webkit-animation-name: needle_move;
    -webkit-animation-duration:8s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
    -webkit-transform-origin: 0px 10px;
    -webkit-transform: rotate(0deg);
    -webkit-transition: all .2s;
       -moz-transition: all .2s;
            transition: all .2s;
}

@-webkit-keyframes needle_move {
    0% {
       -webkit-transform: rotate(0deg);
    }
    50% {
       -webkit-transform: rotate(-15deg);
    }
    70% {
       -webkit-transform: rotate(-15deg);
    }
    0% {
       -webkit-transform: rotate(0deg);
    }
}