Question

我有一个jQuery Cycle幻灯片，由带有附加文本的图像组成，用作标题样式文本。图像淡入，文本（放置在div中）进出动画，大致与使用前回调方法的图像同时进行。我现在尝试添加上一个和下一个控件。它们有效，但是它们会立即前进到下一个/上一个幻灯片，因为之前的回调是延迟的，它们似乎没有触发之前的回调。我想知道如何使整个系统工作，并且如果我点击上一个和下一个控件，动画文本会与图像同时淡入。

解决此设置的最佳方法是什么？我是在正确的道路上还是有更有效率的方法来解决这个问题？代码如下，提前谢谢！

<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');
    }
});

Answer 1

我实际上是另一种方式;我将fx更改为scrollLeft，然后将动画放在after回调之后（并使用before callback'重置'标题文本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')
  }
});

Answer 2

如果我找到了你，那么你真正需要做的就是之前或之后都没有使用任何东西。我在这里写了一个简单的例子：http://jsfiddle.net/v3VP2/22/。

jQuery Cycle Next和Prev with onBefore回调动画文本内容

2 个答案: