Нужна помощь в добавлении/изменении моего script, чтобы включить некоторое вращение с помощью jquery и css

Вот скрипка:

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

Я хочу, чтобы запись записи на записи, как вы видите на моем изображении ниже, поворачивается на запись, когда пользователь нажимает кнопку воспроизведения (см. скрипку)

Размещение иглы не обязательно является окончательным, и я хочу, чтобы он находился в верхнем правом углу (я включил изображение, необходимое для этого, и css внизу)

Прямо сейчас, если вы нажмете кнопку воспроизведения (см. скрипку, наведите указатель мыши на одну из обложек записей, нажмите "Воспроизвести" ), стрелка записи входит слева, а затем, если вы нажмете кнопку "Стоп" на той же записи, она вернется к оставил. Если вы нажмете кнопку воспроизведения на другой записи, прежде чем остановить воспроизведение, она останется на одном месте.

Я хочу, чтобы это было похоже на изображение ниже, где оно всегда отображается, но не в записи, если вы не нажмете кнопку воспроизведения, а затем повернуть. Затем, если вы нажмете кнопку воспроизведения на другой записи, в то время как в данный момент она играет, она просто сдвигается/перемещается, как ее изменение. Тогда, конечно, если вы нажмете кнопку "Стоп", она отключится от записи.

Вот мой текущий 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');
});
});

и вот текущий 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 на 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;
}

Ответ 1

+1 для подробного вопроса!:)

Вы уже полагаетесь на css3 для вращающегося диска, и поскольку это вполне возможно с css-переходами, все, что вам нужно сделать с javascript, это добавить/удалить класс.

Демо: http://jsfiddle.net/7txt3/31/

Это, по сути, то, что я добавил (плюс некоторые префиксы поставщика)

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/

Ответ 2

Я думаю, что это должно дать желаемый эффект.

Чтобы правильно вращать иглу, вам нужно установить начало преобразования.

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

Вы, конечно, захотите изменить скорости/проценты.

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

Ответ 3

Вот демо, использующее CANVAS, чтобы получить анимацию иглы, которую вы хотели в своем вопросе.

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

Из-за префикса vender spammed CSS3 и отсутствия поддержки браузера для точки ротации. Я думаю, что переход на CANVAS немного чище.