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

Question

Here is the fiddle:

http://jsfiddle.net/7txt3/29/

当用户单击播放按钮(参见 fiddle )时，我想让记录针像您在下图中看到的那样旋转到记录上

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

现在，如果您点击播放(参见 fiddle ，将鼠标悬停在其中一张唱片封面上，点击播放)唱片针从左侧进入，然后如果您在同一条唱片上点击停止，它会返回到左边。如果您在停止播放之前单击另一条记录上的播放，它只会停留在同一个地方。

我希望它像下面的图像一样，它始终显示但不在记录中，除非您单击播放按钮然后旋转。然后，如果您在当前正在播放的记录上单击播放另一条记录，它就会像它的变化一样移动/移动。当然，如果您点击停止，它就会消失。

这是我当前的脚本:

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

if you want to put the needle in the top right corner here is the image and css to use in the fiddle for that. You might have to move the record (.record2) a bit so just change the css to left:-4px;

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

Answer 1

+1 详细问题! :)

您已经依赖 css3 来实现旋转圆盘，并且由于这对于 css 转换非常可行，因此您需要使用 javascript 做的就是添加/删除一个类。

演示:http://jsfiddle.net/7txt3/31/

这基本上是我添加的(加上一些 vendor 前缀)

CSS

#needle
    transition: all .2s ease;
}
#needle.playing {
    transform: rotate(-10deg);
}

jquery

从 .animate(...) 更改为 .removeClass() 和 .addClass() 调用。

我还稍微更改了 #needle css 以便从针手的左侧旋转，但您可以查看 https://developer.mozilla.org/en-US/docs/CSS/transform-origin相反。

编辑

抱歉，我错过了关于记录更改之间的动画部分。您可以做的一件事是删除该类，然后在延迟后将其添加回来，如下所示: http://jsfiddle.net/7txt3/53/