1

我有一个 jQuery Cycle 幻灯片，其中包含用作标题样式文本的附加文本的图像。图像淡入，文本（放置在 div 中）动画进出，与使用 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 回答