jQuery / CSS アニメーションの一時停止・再開を実装したい

Question

現在こちらのページを作成中なのですが、jQueryとCSSのアニメーションの一時停止・再開のところでつまづいています。

http://orangeplusme.sub.jp/page/sanopan.html

・動く画像をクリックして「#openL06」のような表示をした時に、画像を動かしているjQueryとフィルムのような形になっているCSSアニメーションを一時停止
・その後、再度「http://orangeplusme.sub.jp/page/sanopan.html#」に戻った際に、上記のjQueryとCSSのアニメーションを再開

また、今回知識不足でjQueryとCSSのアニメーションを両方使っていますが、似た動作でどちらかに統一できるのであれば、方法を知りたいです。

13日までに作成したいと思っています。よろしくお願いします。

Answer 1

CSSについては、

.line-1 {
  width: 16px;
  height: 1498px;
  float:left;
  background: linear-gradient(0deg, rgb(67,67,67) 33%, #fff 33%, #fff 66%, rgb(67,67,67) 66%,rgb(67,67,67));
  -webkit-animation: stripeBgA 25s linear infinite;
  background-size: 5px 25px;
  border: 12px solid rgb(67,67,67);
  }

この部分を、

.line-1 {
  width: 16px;
  height: 1498px;
  float:left;
  background: linear-gradient(0deg, rgb(67,67,67) 33%, #fff 33%, #fff 66%, rgb(67,67,67) 66%,rgb(67,67,67));
  background-size: 5px 25px;
  border: 12px solid rgb(67,67,67);
  }
.line-1.active {
  -webkit-animation: stripeBgA 25s linear infinite;
  }

このようにしてアニメーションCSSを分離し、

$('.line-1').toggleClass('active')

このような感じでオンオフすればいいかと思います。

javascript部分に関しては、

//timer
var timerID = setInterval(function(){
	$("#next").click();
},4500);

この部分を、

//timer
var timerFunc = function(){
	$("#next").click();
}
var timerFuncOff = function(){
}
var timerFunc = timerFuncOn;
var timerID = setInterval(timerFunc,4500);

こんな感じに変え、

timerFunc = timerFuncOff;

こんな感じで切り替えればいいのではないかと思います。
loopBに関しても同様です。
（ほんとはクロージャを使ってメソッドで切り替えるように書いた方がかっこいいと思いますが、分かりやすさを優先しました）

参考になれば幸いです。

Answer 2

こちらを参考にしてみてはいかがでしょう?