質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

jQueryでエラーなしで作動もしない

gundamrx-0
gundamrx-0

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0グッド

0クリップ

205閲覧

投稿2022/11/24 23:36

編集2022/11/24 23:42

前提

jQueryでwebサイトの模写コーディングをしています。
関数宣言での処理を書いたのですがエラーもなしで動きもしません。

実現したいこと

$(".slide-box")をスライドショーのように一定時間ごとに切り替えたい

発生している問題・エラーメッセージ

特になし

該当のソースコード

$(function(){
$(".slide-box").animate({
transform: "translateX(-1008px)"
}, 5000 , "swing").animate({
transform: "translateX(-2016px)"
}, 5000 , "swing").animate({
transform: "translateX(-3024px)"
}, 5000 , "swing").animate({
transform: "translateX(-4032px)"
}, 5000 , "swing").animate({
transform: "translateX(-5040px)"
}, 5000 , "swing").animate({
transform: "translateX(-6048px)"
}, 5000 , "swing").animate({
transform: "translateX(-7056px)"
}, 5000 , "swing");
});

<ul class="slide-box"> <li> <a href="#"> <img src="img/video/attention-box/main_img01.jpeg"> </a> </li> <li> <a href="#"> <img src="img/video/attention-box/SUV_LINEUP_2100_1000+.jpeg"> </a> </li> <li> <a href="#"> <img src="img/video/attention-box/thanksdays_2100px-1000px.jpeg"> </a> </li> <li> <a href="#"> <img src="img/video/attention-box/2022_08_18_CX30_2100px-1000px.jpeg"> </a> </li> <li> <a href="#"> <img src="img/video/attention-box//2204_cx-5_2100px-1000px.jpeg"> </a> </li> <li> <a href="#"> <img src="img/video/attention-box/CX60_2100px-1000px_0914.jpeg"> </a> </li> <li> <a href="#"> <img src="img/video/attention-box/M_HYBRID_2100px-1000px.jpeg"> </a> </li> </ul>

& ul {
width: 700%;
height: 100%;
display: flex;

&.slide-box { transform: translateX(0px); } li { width: 100%; height: 100%; & a { display: block; width: 100%; height: 100%; & img { width: 100%; height: 100%; object-fit: cover; } } } }

試したこと

関数宣言が正常に機能しているかを
alert(ok!)
でチェックした(正常に作動)

補足情報(FW/ツールのバージョンなど)

現在使っているバージョン

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

transformはanimateではなくcssで指定してください

javascript

1<script> 2$(function(){ 3 $(".slide-box").css({transform: "translateX(100px)"}) 4 .delay(1000).queue(function(){$(this).css({transform: "translateX(0px)"}).dequeue();}) 5 .delay(1000).queue(function(){$(this).css({transform: "translateX(100px)"}).dequeue();}) 6 .delay(1000).queue(function(){$(this).css({transform: "translateX(0px)"}).dequeue();}) 7}); 8</script> 9<style> 10.slide-box{ 11 transition: transform 1s linear; 12} 13</style> 14<ul class="slide-box"> 15<li><a href="#"><img src="#" alt="1"></a></li> 16<li><a href="#"><img src="#" alt="2"></a></li> 17<li><a href="#"><img src="#" alt="3"></a></li> 18</ul>

投稿2022/11/25 01:00

編集2022/11/25 01:14
yambejp

総合スコア109126

gundamrx-0👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

gundamrx-0

2022/11/25 23:13

解決できました! ご教授いただきありがとうございました!!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。