より長いフェード遷移を提供しながら、UrbanAirship.com で同様の効果を達成しようとしています。複数の UL を使用し、その下に隠された LI を使用し、フェード効果を使用して、一方向のフェードを実現しました。Cycle2 JQUERY プラグインでこれを達成しましたが、カスタム InOut コードを使用して達成しました。LI に割り当てたデータ速度属性を取得して、フェードをメインの LI に戻そうとしましたが、1 回のループの後、おかしくなりました。
HTMLは次のとおりです。
<ul class="row" id="community-rotator">
<li>
<ul class="logos-1">
<li data-speed="5000"><img src="Leukemia&LymphomaSociety.png"></li>
<li data-speed="10000"><img src="BoysAndGirlsClub.png"></li>
<li data-speed="2000"><img src="SusanKomenPhoenix.png"></li>
</ul>
</li>
<li>
<ul class="logos-2">
<li data-speed="6000"><img src="AmericanCancer.png"></li>
<li data-speed="8000"><img src="NotreDamePrep.png"></li>
<li data-speed="4000"><img src="ChronsFoundation.png"></li>
</ul>
</li>
<li>
<ul class="logos-3">
<li data-speed="7000"><img src="RonaldMcDonaldHouse.png"></li>
<li data-speed="6000"><img src="SusanKomenFlorida.png"></li>
<li data-speed="6000"><img src="DMHS.png"></li>
</ul>
</li>
<li>
<ul class="logos-4">
<li data-speed="8000"><img src="phoenixchildrens.png"></li>
<li data-speed="4000"><img src="MIKID.png"></li>
<li data-speed="8000"><img src="RonanThompsonFoundation.png"></li>
</ul>
</li>
<li>
<ul class="logos-5">
<li data-speed="9000"><img src="100club.png"></li>
<li data-speed="2000"><img src="ASU.png"></li>
<li data-speed="10000"><img src="SunshineAcres.png"></li>
</ul>
</li>
ハッキングされた Javascript は次のとおりです。
function InOut( elem )
{
var delaySpeed = elem.data('speed')
elem.delay()
.fadeIn(500)
.delay(delaySpeed )
.fadeOut(
500,
function(){
if(elem.next().length > 0)
{InOut( elem.next() );}
else
{InOut( elem.siblings(':first'));}
}
);
}
$('.logos-1 li').hide();
InOut( $('.logos-1 li:first'));
$('.logos-2 li').hide();
InOut( $('.logos-2 li:first'));
$('.logos-3 li').hide();
InOut( $('.logos-3 li:first'));
$('.logos-4 li').hide();
InOut( $('.logos-4 li:first'));
$('.logos-5 li').hide();
InOut( $('.logos-5 li:first'));
どんな助けでも大歓迎です、私はこのプログラミング全体に不慣れです:)
ありがとう!