2013-03-04 62 views

回答

0

可以掛接到之前的jQuery週期的和事件之後:

$('.cycle-container').cycle(); 

$('.cycle-container').on('cycle-before', function(event, options, outgoing, incoming) { 
    $(this).find(options.caption).fadeOut(); 
}); 

$('.cycle-container').on('cycle-after', function(event, options, outgoing, incoming) { 
    $(this).find(options.caption).fadeIn(); 
}); 

把它做一個幻燈片動畫這可能是稍微複雜一些,但你的想法。

0

只需連接animate.css然後將不同的轉換應用於不同的模板。如:

data-cycle-caption-template="<span class=caption1>{{caption1}}</span> <span class=caption2>{{caption2}}</span> <span class=caption3>{{caption3}}</span>" 

然後在

<li 
    data-cycle-caption1="This is Slide 1 Caption 1" 
    data-cycle-caption2="This is Slide 1 Caption 2" 
    data-cycle-caption2="This is Slide 1 Caption 2" 
> 

一些CSS

.cycle-caption { 
width:100%; 
height:100%; 
padding:20px; 
position:absolute; 
top:0; 
left:0; 
z-index:20; 
opacity:1; 
} 


.caption1 { 
font-weight:bold; 
color:#FFF; 
background:#000; 
font-size:27px; 
position:absolute; 
top:20px; 
left:20px; 
z-index:30; 
padding:5px; 
-moz-animation: fadeInRight 1 ease-in 1.3s backwards; -webkit-animation: fadeInRight 1s ease-in 1s backwards; animation: fadeInRight 1s ease-in 1s backwards; 
opacity: 1; 
} 
.caption2 { 
font-weight:bold; 
color:#FFF; 
background:#000; 
font-size:22px; 
position:absolute; 
top:70px; 
left:20px; 
z-index:40; 
padding:5px; 
-moz-animation: fadeInLeft 1s ease-in 1.5s backwards; -webkit-animation: fadeInLeft 1s ease-in 1.5s backwards; animation: fadeInLeft 1s ease-in 1.5s backwards; 
    opacity:1; 
} 


.caption3 { 
font-weight:bold; 
color:#000; 
background:#FFF; 
border:1px solid rgba(0,0,0,0.5); 
font-size:16px; 
-moz-animation: fadeInLeft 1s ease-in 2s backwards; -webkit-animation: fadeInLeft 1sease-in 2s backwards; animation: fadeInLeft 1 sease-in 2s backwards; 
position:absolute; 
bottom:80px; 
right:80px; 
z-index:50; 
padding:5px; 
    opacity:1; 
} 

看看我Fiddle

+0

這是非常有趣的,看起來像一個偉大的想法。但我無法弄清楚如何將動畫應用到每張幻燈片。對我而言,它只在頁面加載時動畫,但不是每張幻燈片都會變化。有小費嗎?? – Trevor 2014-05-30 17:02:44