1

見出しスタイルのテキストとして使用される追加のテキストを含む画像で構成される jQuery Cycle スライドショーがあります。画像がフェードインし、(div に配置された) テキストがアニメーション インおよびアニメーション アウトします。これは、画像が before コールバック メソッドを使用するのとほぼ同時に行われます。前と次のコントロールを追加しようとしています。それらは機能しますが、次/前のスライドにすぐに進みます。これは、before コールバックが遅延しているため、before コールバックをトリガーしていないようです。このシステム全体を機能させる方法と、前のコントロールと次のコントロールをクリックすると、アニメーションテキストが画像と同時にフェードインする方法を考えています。

この設定に取り組む最善の方法は何ですか? 私は正しい道を進んでいますか、それとももっと効率的で適切な方法がありますか? 以下のコード、よろしくお願いします！

<div id="sliderCont">
    <a href="#" id="prev1" name="prev1">PREV</a> <a href="#" id="next1" name=
    "next1">NEXT</a>

    <ul id="slider">
      <li>
        <a href="#"><img src="library/images/car_tarp.jpg" /></a>

        <div class="captionHidden">
          <div class="captionInner">
            <h2 id="slide1_headline1">Unveiling a Revolution</h2>

            <h3 id="slide1_headline2">in Automotive Hospitality</h3>

            <h4 id="slide1_headline3">What Makes Us Different</h4>
          </div>
        </div>
      </li>

      <li>
        <a href="#"><img src="library/images/passion.jpg" /></a>

        <div class="captionHidden">
          <div class="captionInner">
            <h2 id="slide2_headline1">Providing the Blueprint For</h2>

            <h3 id="slide2_headline2">Performance with<br />
            Passion</h3>
          </div>
        </div>
      </li>
    </ul>
</div>

次にCSS

*, html, body { margin:0;padding: 0; }
#sliderCont {
height: 512px;
width:1200px;
overflow: hidden;
position: relative;
margin-top: 30px;
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 7px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
#slider {
width: 1200px;
height: 512px;
z-index: 1;
margin: 0;
padding: 0;
background: #ccc;
overflow: hidden;
}
#slider li {
margin: 0;
}
div.caption {
display: none;
position: absolute;
top: 60px;
left: 60px;
z-index: 2;
font-weight: lighter;

}
div.captionHidden {
display: block;
position: absolute;
top: 60px;
left: 60px;
z-index: 2;
width:1080px;
}
div.captionInner {position: relative; width:1080px;}
div.caption span.item {
display: inline-block;
padding: 10px;
font-size: 20px;
background-color: #2C2C2C;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0,    0.2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
color: #E7E7E7;
}
div.caption span.item.second {
margin-left: 15px;
margin-top: -5px;
}
span.slider-highlight {
color: #59b5e2;
}

h2#slide1_headline1 { font-size: 79px;text-align: right;font-weight: normal; color:  #353534;}
h3#slide1_headline2 { font-family: "Arial Black", Arial; font-size: 32px;text-align: right;font-weight: bold; color:#353534;}
h4#slide1_headline3 { font-size: 18px;text-align: right;font-weight: normal; color: #353534;}


h2#slide2_headline1 { font-family: "Arial Black", Arial;font-weight: bold; font-size:  32px;text-align:left; color: #ffffff;}
h3#slide2_headline2 { font-size: 79px;text-align: left;font-weight:  normal;color:#ffffff;}

次に、サイクルの jQuery:

$(function() {
    $('#slider').cycle({
        fx: 'fade',
        speed: 800,
        prev: '#prev1',
        next: '#next1',
        easing: 'easeOutCubic',
        timeout: 5000,
        before: onBefore
    });

    function onBefore(curr, next, opts) {
        $(this).children('.captionHidden').css({
            'opacity': '0',
            'top': '0px'
        });
        $(this).children('.captionHidden').animate({
            opacity: 1,
            top: '60px'
        }, 600, 'easeOutCubic').delay(5000).animate({
            'opacity': 0,
            'top': '-5px'
        }, 500, 'easeOutCubic');
    }
});​
4

2 に答える 2

2

私は実際にこれを別の方法で行いました。fx を scrollLeft に変更し、アニメーションを after コールバックに配置しました (before コールバックを使用して、キャプション テキスト div コンテナーを opacity:0; および top:0; に「リセット」します)。

$(function() {
 $('#slider').cycle({
    fx : 'scrollLeft',
    speed : 700,
    prev:   '#prev1', 
    next:   '#next1',
    easing: 'easeOutCubic',
    timeout: 5000,
    before : onBefore,
    after: onAfter
});

function onBefore(curr,next,opts) {
   $(this).children('.captionHidden').css({'opacity' : '0','top' :'0px'});
 }
function onAfter(curr,next,opts) {
   $(this).children('.captionHidden').animate({
    opacity: 1,
    top: '60px'
   }, 600, 'easeOutCubic')
  }
});
于 2012-10-04T21:25:44.383 に答える
0

私があなたを正しければ、あなたが本当にする必要があるのは、前または後に何も使わないことだけでした. ここに簡単な例を書きました: http://jsfiddle.net/v3VP2/22/。

于 2012-10-04T21:33:18.373 に答える