animateメソッドのプロパティはここをみる
イージング
二次曲線てきな動きのアニメを再現できる
linear
りにあ
直線的な動き
今回はこれを第3引数に設定する
こうだろうか
$('#slide').text(news[ran]);
$('#slide').animate({'margin-left':'-500px'},3000,"linear");
→この2行はチェーンメソッドで続けて記述できる
$('#slide').text(news[ran]).animate({'margin-left':'-500px'},7000,"linear");//第一引数は「オブジェクト」、第二引数はミリ秒単位
アニメートメソッドの引数：
第1 css(どのように変化させるか終了形をオブジェクトで記述)
2 時間（ミリ秒）
3 どういうアニメのタイプか
4 コールバック（アニメがおわったあと。関数が指定できる）
セットインターバルの第一引数はかっこなし
かっこをつけると一回実行して二度と実行されない
関数の名前だけを記すように
--->test1.js
$(function(){
console.log('hoge');
var news=[
'70歳まで就業機会確保 政府案',
'東海第2 予算700億円オーバー',
'男女平等121位 過去最低に',
'チャイルドシート 厚着は危険',
'妻救って去った恩人 見つかる',
'筒香レイズ入り発表 背番は25',
'川越シェフ 3年ぶりTV復帰',
'マツコ 宇多田ヒカルと初共演',
'災厄はらう火の舞',
'次の駅は新大阪',
'次の駅は博多'
];
function disp(){
var ran = Math.floor(Math.random()*news.length);
$('#slide').text(news[ran])
.animate({'margin-left':'-500px'},5000,"linear",function(){
$(this).css('margin-left','550px');
});
};
setInterval(disp, 1000);
});
--->test1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="test1.css">
<title>slide</title>
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="frame">
<div id="slide"></div>
<div id="sakana"><img src="../img/fish_kue2.png"></div>
</div>
<div id="sakana"><img src="../img/fish_kue2.png"></div>
<script src="test1.js"></script>
</body>
</html>
--->test1.css
html{
margin:0;
padding:0;
}
body{
background:#c3ff75;
margin:0;
padding:0;
}
#frame{
background:#333;
width:500px;
height: 30px;
margin: auto;
padding:0.5rem;
overflow: hidden;/*はみ出した部分は表示しない*/
}
#slide{
color:#ff0;
margin-left:550px;
width:500px;
height:300px;
}
この文字にリンクをつけて、動くリンクを作るというのはよろしくない
流れている文字をクリックさせようというのは良くないらしいです
