只有当滑动幻灯片在

触发动画嘿家伙我有一个动态添加动画的困难，我基本上只是一个HTML/CSS的人，谁避免JS，但偶尔使用JQuery，我知道如何编写jQuery代码。所以baically我的难处是，我有引导carasoul小提琴here茨艾伦：只有当滑动幻灯片在

现在我已经在carasoul创建CSS-3动画图像动画代码如下：

@keyframes scalebg { 
    0%{ 
    -ms-transform:scale(1); 
    -o-transform:scale(1); 
    -moz-transform:scale(1); 
    -webkit-transform:scale(1); 
    transform:scale(1); 
    } 

    100% { 
    -ms-transform:scale(1.3); 
    -o-transform:scale(1.3); 
    -moz-transform:scale(1.3); 
    -webkit-transform:scale(1.3); 
    transform:scale(1.3); 

    } 
} 

.scalebg { 
    -webkit-animation-duration: 5s; 
    -o-animation-duration: 5s; 
    animation-duration: 5s; 
    -webkit-transition-timing-function: linear; 
    -o-transition-timing-function: linear; 
    transition-timing-function: linear; 
    -webkit-animation-name: scalebg; 
    -o-animation-name: scalebg; 
    animation-name: scalebg; 
    -webkit-animation-iteration-count: infinite; 
    -o-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
    -webkit-animation-direction: alternate; 
    -o-animation-direction: alternate; 
    animation-direction: alternate; 
}

的问题我我有::

现在我真的很想做的是，当每张幻灯片出现，我会立即喜欢类scalebg出现在<img>标签在该微粒幻灯片，问题是我如何检测哪些微粒幻灯片在幻灯片中滑动d我如何将类scalebg添加到该特定幻灯片？多数民众的我面临的挑战..

的bootrap documentation不说，引导carasoul暴露2个事件：

slide.bs.carousel ::此事件立即在滑动实例方法调用。

sliding.bs.carousel ::当旋转木马已完成幻灯片切换时，此事件被触发。

但我不知道如何使用这些事件来完成我想要的。有人可以请指导我。

P.S. ::

截至目前效果的作品，因为我有下面的代码添加到动画：

animation-iteration-count: infinite;

但那不是我怎么想的动画是。

谢谢。

Alex-z。

来源

2015-04-15 Alexander Solonik

您可以使用e.relatedTarget使元素处于活动状态。

$('#myCarousel').on('slid.bs.carousel', function (e) { 
     $('.item').find('img').removeClass('scalebg'); 
     $(e.relatedTarget).find('img').addClass('scalebg'); 
})

Fiddle Demo

来源

2015-04-15 12:55:26 anpsmn

只有当滑动幻灯片在

回答

相关问题