嘿,大家好我使用引导标签组件在我的项目之一,现在我想一些动画添加到我的引导标签,下面是HTML代码:引导animationing标签内容脚本
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#sectionA">General fitness</a></li>
<li><a href="#sectionB">Cardio</a></li>
<li><a href="#sectionC">weight training</a></li>
<li><a href="#sectionD">weight loss</a></li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right animated bounceInLeft">
</div>
<div class="col-md-5 animated bounceInRight" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionB" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionC" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionD" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
</div>
现在一切工作正常,请注意我如何为<img>
和第二个<div class="col-md-5">
添加动画。
是我写的应用动画脚本,每次一个标签被点击:
jQuery脚本:
$('#myTab').on('click' , 'li a' , function(){
$this = $(this);
var str_href = $this.attr('href');
str_image = str_href + ' ' + 'img';
str_contentdiv = str_href + ' ' + '.add-animation';
$(str_image).removeClass('animated bounceInLeft');
$(str_contentdiv).removeClass('animated bounceInRight');
setTimeout(function(){
$(str_image).addClass('animated bounceInLeft');
$(str_contentdiv).addClass('animated bounceInRight');
setTimeout(function(){
$(str_image).removeClass('animated bounceInLeft');
$(str_contentdiv).removeClass('animated bounceInRight');
}, 2000);
}, 100);
});
其短暂的甜蜜,问题是去除类的setTimeout函数需要2秒钟,这意味着如果用户变成一个点击狂人,动画将不会运行,原因是,我无法爱上2秒规则,动画运行了2秒。
如果有人能够帮助我加入失踪的陪审团,我将不胜感激,I.E.我如何让动画每次点击一个标签?
谢谢。
Alexander。
该动画是一个动画_(使用关键帧)_或者是一个过渡? – Matho 2015-04-01 00:49:02