Question

我希望只有在我的滑块中显示特定幻灯片时才会启动一些CSS3或JQuery动画。它不是我需要帮助的动画，它更能弄清楚如何在幻灯片/父容器淡入时触发/启动动画。

这是我目前正在使用的滑块的JQuery。

JQuery的：

var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var target;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
images.fadeOut(800).eq(target).fadeIn(800);
triggers.removeClass('active').eq(target).addClass('active');
}

triggers.click(function() {
if ( !$(this).hasClass('active') ) {
    target = $(this).index();
    sliderResponse(target);
    resetTiming();
}
});

$('.next').click(function() {
target = $('ul.triggers li.active').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
resetTiming();
});
$('.prev').click(function() {
target = $('ul.triggers li.active').index();
lastElem = triggers.length-1;
target === 0 ? target = lastElem : target = target-1;
sliderResponse(target);
resetTiming();
});

function sliderTiming() {
target = $('ul.triggers li.active').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },7000);
function resetTiming() {
clearInterval(timingRun);
timingRun = setInterval(function() { sliderTiming(); },7000);
}

这是我的HTML：

    <div class="mask">
      <ul class="images">
    <li>
      <h1>eCommerce Websites</h1>
      <h2>profit from effective, beautiful and functional eCommerce websites that work.</h2>
      <a class="button" href="contact.html">FURTHER DETAILS</a>
      <a href="#">view portfolio</a>
      <a href="#">get in touch</a>
    </li>
    <li>
      <h1>Responsive Websites</h1>
      <h2>making your website mobile friendly is now more important than ever before. Lets build a user friendly website ideal for mobile devices.</h2>
      <a class="button" href="contact.html">FURTHER DETAILS</a>
      <a href="#">view portfolio</a>
      <a href="#">get in touch</a>
    </li>
    <li>
      <h1>Literature Design</h1>
      <h2>Literature design that is clear, precise and reflects your brand. Make a good impression with effective literature.</h2>
      <a class="button" href="contact.html">FURTHER DETAILS</a>
      <a href="#">view portfolio</a>
      <a href="#">get in touch</a>
    </li>
    <li>
      <h1>Design Packages</h1>
      <h2>Benefit from my money saving packages that offer a variety of popular services all in one bundle!</h2>
      <a class="button" id="packagesbtn">FURTHER DETAILS</a>
    </li>
  </ul>
</div>

<ul class="triggers">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="control prev"></span>
<span class="control next"></span>

当幻灯片淡入时，我想要动画的h1和h2元素。

感谢您的帮助。

丹尼尔

Answer 1

fadeIn()接受回调。指定后，它将在元素停止淡入后立即触发（动画完成）。例如：

<强> HTML

<div class="js-fadein one"></div>
<div class="js-callback-element two"></div>

<强>的jQuery

$('.js-fadein').fadeIn(1000, function() {
    /// Show div .two after div .one is faded in
    $('.js-callback-element').fadeIn();
});

第一个fadein()中使用的匿名函数是回调。

小提琴： https://jsfiddle.net/my7a5a0n/

认为这足以让你弄明白其余部分。

在幻灯片处于活动状态/显示

1 个答案: