觸發動畫，一旦幻燈片被激活/顯示

我想要一些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元素我想當滑動淡入動畫

謝謝您幫幫我。

丹尼爾

來源

2015-06-28 DannyBoy

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/

認爲這是足以讓你找出休息。

來源

2015-06-28 13:27:06 lesssugar

觸發動畫，一旦幻燈片被激活/顯示

回答

相關問題