Need help to add/modify to my script to include some rotation using jquery and css

Question

Here is the fiddle:

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

I want to have the record needle on the record like you see in my image below rotate on to the record when the user clicks the play button(see the fiddle)

The needle placement is not necessarily final and I might want it to be in the top right corner.(I've included the image needed for that and the css at the bottom)

Right now if you click play(see the fiddle, hover over on one of the record covers, click play) the record needle comes in from the left and then if you click stop on the same record it goes back out to the left. If you click play on another record before stopping the playing one it just stays in the same place.

I want it to be like the image below where it is always showing but not on the record unless you click the play button and then it rotates on. Then if you click play on another record while one is currently playing it just shifts/moves like its changing. Then of course if you click stop it goes off the record.

Here is my current script:

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

and here is the current css for the record needle:

#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 for detailed question! :)

You're already relying on css3 for the rotating disc, and since this is quite doable with css transitions, all you need to do with the javascript is to add/remove a class.

Demo: http://jsfiddle.net/7txt3/31/

This is essentially what I added (plus some vendor prefixes)

css

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

jquery

changed from .animate(...) to .removeClass() and .addClass() calls.

I also changed the #needle css a bit in order to rotate from the left of the needle hand, but you could look at https://developer.mozilla.org/en-US/docs/CSS/transform-origin instead.

edit

Sorry, I missed the part about animating between record changes. One thing you can do is to remove the class and then add it back after a delay, something like this: http://jsfiddle.net/7txt3/53/

Answer 2

I think this should give the desired effect.

To have the needle rotate correctly you need to set the transform origin.

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

You of course will want to modify the speeds/percentages.

    #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);
    }
}