私はタイトルを台無しにして申し訳ありません。私は本当に私のケースを正しく記述する方法はわかりません。私はまだ初心者です。ユニークなクラスごとに異なる配列を使用する同じ関数
とにかく、ユニークな配列から単語を表示し、別のものに変更し、すべてを繰り返します.12s - 点滅効果の並べ替えをイメージ上に単純なホバー効果を作成しようとしています。
私は8つのイメージを最初に持っています。つまり、8個のユニークなアレイを作成する必要があります。
問題は、すべての機能を有効にするためには、個々の画像/ユニークなクラスごとに同じ機能を掛けなければならないということです。乱雑なコードのために申し訳ありません
$(window).on("load", function() {
var LP1 = [
'ui',
'ux',
'webdesign',
'logo',
'responsive',
'personal'
], i = 0;
setInterval(function(){
$('.left-title').fadeOut(0, function(){
$(this).html(LP1[i=(i+1)%LP1.length]).fadeIn(0);
});
}, 120);
var LP2 = [
'cover',
'art',
'music',
'print',
'personal'
], i = 0;
setInterval(function(){
$('.right-title').fadeOut(0, function(){
$(this).html(LP2[i=(i+1)%LP2.length]).fadeIn(0);
});
}, 120);
});* {
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
}
.wrap-fixed-real {
width: calc(100% - 32px);
height: calc(100% - 32px);
position: fixed;
top: 16px;
left: 16px;
z-index: 1;
}
.left {
top: 0;
position: absolute;
left: 0px;
height: 100%;
width: calc(50% - 8px);
background-color: #292929;
}
.right{
top: 0px;
position: absolute;
right: 0px;
height: 100%;
width: calc(50% - 8px);
background-color: #292929;
}
.dimming {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
background-color: #000000;
transition: opacity .24s 0s cubic-bezier(.64,0,.36,1);
}
.left-title {
position: absolute;
display: block;
width: calc(100% - 32px);
top: 50%;
transform: translateY(-50%);
left: 16px;
z-index: 3;
opacity: 0;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 32px;
text-align: center;
line-height: 48px;
color: #ffffff;
mix-blend-mode: difference;
transition: opacity .24s 0s cubic-bezier(.64,0,.36,1);
}
.left:hover .dimming {
opacity: .4;
}
.left:hover .left-title {
opacity: 1;
}
.right-title {
position: absolute;
display: block;
width: calc(100% - 32px);
top: 50%;
transform: translateY(-50%);
left: 16px;
z-index: 3;
opacity: 0;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 32px;
text-align: center;
line-height: 48px;
color: #ffffff;
mix-blend-mode: difference;
transition: opacity .24s 0s cubic-bezier(.64,0,.36,1);
}
.right:hover .dimming {
opacity: .4;
}
.right:hover .right-title {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrap-fixed-real">
<div class="left">
<div class="left-title">LP1</div>
<div class="dimming"></div>
</div>
<div class="right">
<div class="right-title">LP2</div>
<div class="dimming"></div>
</div>
</div>
</body>：灰色の領域にカーソルを合わせる - ここ
は二つの容器のための少しの例です。それはCSSになると、私は同じスタイルを共有する8つの異なるサブクラスと1つのユニークを作成することができたと思うが、私はどのように単一の関数がすべてのイメージ/ユニークなクラスの異なる配列を使用するように強制する方法がない。私はインターネット上でいくつかの研究をしていたが、私は答えを見つけることができなかった。たぶん私はちょうどGoogleのwrrongキーワードを使用しているので、誰かが正しい方向に私を指すことができれば、それはいいだろう。または、私が望むものを作成することは可能ですか、関数を乗算するだけですか？私はわかりません。
要約：私はすべてのユニークな配列を、「刻印の点滅」効果を起こすユニークなクラスと単一の機能に接続したいと考えています。
もう1つはわかりません。一度に8つの異なる画像に対してテキストを変更するエフェクトは、.12sごとに再生されます。それは私のウェブサイトを遅くするつもりですか？さらに、不透明度を0に設定するのではなく、最初にこのエフェクトを非表示にする必要がありますか？
はあなたの時間を取るために良い先生に感謝します。それは有り難いです。しかし、私はそれが実際にどのように動作するか完全に理解していないと認めなければなりません。私は後でいくつかの研究をするつもりです。今のところ私はこれを実装しようとしています。再度、感謝します！ :) – Tanuki
[jquery.com]（https://learn.jquery.com/plugins/basic-plugin-creation/）でプラグインを作成する（つまり、いくつかの '$ .fn.xxxx'関数を定義する）ことができます。 – trincot