自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。基本インドアです!InstagramTwitterContactサーバーとドメインの同時取得で.jpが無料シュウこんばんはー今日は【jQuery】マウスオーバー時の画像エフェクトについて勉強していきましょう![記事の内容]マウスオーバー(フェードイン/アウト)2つの画像を使ったエフェクト画像を使いスライドさせるエフェクトまとめマウスオーバー(フェードイン/アウト)1index.htmlファイルを作成しようHTMLのhead要素内に、「style.css」、「JavaScript」ファイルを読み込んでおきます。src="js/jquery-1.11.3.min.js"></script></head><body></body></html>2画像の用意し配置します画像サイズ「360×300」を用意します。今回はdivタグでimgタグを囲いマウスオーバーした際に、カーソルを矢印から指マークに変えるために「cursor:pointer」の設定をおこないます。pointer;}3index.htmlにjQueryを記述します基本となるマウスオーバーとマウスアウトをhover()イベントを使って設定します。});});</script>4スクリプトを追加し、画像にエフェクトを設定しますマウスオーバー時に画像が半透明になり、マウスアウト時に元に戻る設定をおこないます。1「animate()」で画像を半透明(opacityプロパティを0.5)にアニメーションをさせます。第2引数の”fast”はアニメーションのスピードを指定します。animate()の前のstep()は、マウスオーバー/アウトを素早く繰り返したときに、マウスオーバーした時点で別のアニメーションが進行中だった場合、そのアニメーションを中断し、stop()の後のanimate()を実行します。2animate()で画像を元の状態に戻します。(opacityプロパティを1)に設定します。CodePen.2つの画像を使ったエフェクト1同じサイズの画像を用意します今回は2つの画像を用意し、先ほど使用したCSSを使います。no-repeat;}2スクリプトを変更します。スクリプトを変更し、画像にマウスオーバーしたときに、「opacity:0」にし、マウスアウトしたときに「opacity:1」にアニメーションをさせます。this)」に変更します。CodePen.画像を使いスライドさせるエフェクト1使用する画像を用意します今回は、1つの画像をスライドさせるエフェクトさせる方法です。hidden;」を使用しボックスに収まらない部分を非表示にしましょう。2スクリプトを変更します。-300px;に設定します。スタート地が-300px、マウスオーバーした際に0に戻る設定です。RinkerAmazon楽天市場Yahooショッピングまとめ今回はこれで以上です。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。