2011-06-29 12 views
0

EasySliderを使用してスライドショーを作成しました。また、シャドウボックスを起動できるキャプションオーバーレイを追加するためのホバー/アニメーション機能を追加しました。キャプション付きJquery EasySlider - 最後のスライドがアニメ化しない

私の問題は、最後のスライドがキャプションシーケンスをnullにするようです。この関数は、スライドがトランジション中に実行されますが、終了するとキャプションは元の位置に戻ります。これはシーケンスの最後のスライドでのみ発生します。

キャプション機能やEasySliderを使用してこれを動作させる方法を教えてもらえますか?

http://zachinscho.com/save/kreber_test/V2/

おかげ

答えて

0

ザックを、私は正直にあなたのコードでエラーを見つけることができませんが、あなたは、個々のリスナーを脱いで、すべてのスライドのユニバーサルリスナーを適用した場合、それはあなたの問題を修正

$('#easysliderMain li').hover(function(){ 
    $(".cover", this).stop().animate({top:'250px'},{queue:false,duration:160}); 
}, function() { 
    $(".cover", this).stop().animate({top:'280px'},{queue:false,duration:160}); 
}); 
+0

パーフェクト、ありがとうございます。あなたは私の問題を解決し、私のコードの約40行をノックした、より良い応答を求めることができなかった笑 –

2

私はこれが古い投稿であることを知っています。マーリンは多くの人にテキスト機能を解決しました。だが誰でもキャプションを追加するソリューションを探しているcssにクラスを追加しました(easyslid ER screen.cssファイル)とホバークラスのテキストの振る舞いを定義するには:

CSS:

.stext { 
display: none; 
position: absolute; 
margin-top: -29px; 
width: 660px; 
left:0px; 
padding: 7px 0px; 
} 
#slider li:hover .stext { 
display: block; 
background: #000000; 
opacity: 0.5; 
filter: alpha(opacity=50); 
padding-left: 10px; 
padding-right: 10px; 
font-family: Trebuchet MS, Arial, sans-serif; 
font-size: 12px; 
color: #eeeeee; 
text-decoration: none; 
}  

とhtml(私は例として、最初のスライドが含まれている:

<div id="slider"> 
    <ul>     
     <li><img src="images/slide-01.jpg" alt="image description" /> 
     <a href="#"><span class="stext">caption text to show on hover</span></a></li> 
関連する問題