如果我第一次点击.img-1或.img-2就可以了。 bt不是第二次没有页面刷新。我正在使用Animate.css(zoomIn)。这是代码示例 -
HTML:
<a class="thumbnail img-1"></a>
<a class="thumbnail img-2"></a>
<p class='back-end'>
<p class='front-end'></p>
<h1 class='dismiss pull-right'>×</h1>
jquery的:
$('.img-1,.img-2').click(function(){
$('.back-end,.front-end,.dismiss').addClass('animated zoomIn').show();
})
$('.dismiss').click(function(){
$('.back-end,.front-end,.dismiss').addClass('animated zoomOut');
})
答案 0 :(得分:2)
在jsfiddle中查看 http://jsfiddle.net/oxu69Luw/
脚本如下所示:
$(function () {
function applyZoomInOutAnim(x) {
$('.back-end,.front-end,.dismiss').removeClass("zoomIn zoomOut").addClass(x + ' animated');
}
$('.img-1,.img-2').click(function () {
applyZoomInOutAnim('zoomIn');
});
$('.dismiss').click(function () {
applyZoomInOutAnim('zoomOut');
});
});
答案 1 :(得分:0)
我不是百分百肯定,但我认为你必须先删除.removeClass ...然后当你想再次播放动画时,你必须再次使用.addClass
答案 2 :(得分:0)
http://jsfiddle.net/wahidsherief/e87dkpbf/1/
标记:
<p class='back-end'>
<p class='front-end'></p>
<h1 class='dismiss pull-right'>×</h1>
</p>
<a class="thumbnail img-1"> image 1</a>
<a class="thumbnail img-2"> image 2</a>
css:
.back-end{position: absolute; width: 100%;height: 100%;background: rgba(0,0,0,.4); z-index: 600}
.front-end {background: none repeat scroll 0 0 #fff;height: 65%;left: 16%;position: absolute;top: 22%;width: 68%;z-index: 1000;}
.dismiss{color: black;z-index: 2000;background:red;padding: 30px 50px;font-size: 60px;cursor: pointer;}
脚本:
$('.back-end,.front-end,.dismiss').hide();
function applyZoomInOutAnim(x) {
$('.back-end,.front-end,.dismiss').removeClass("zoomIn zoomOut").addClass(x +' animated');
}
$('.thumbnail').click(function () {
applyZoomInOutAnim('zoomIn');
$('.back-end,.front-end,.dismiss').show();
});
$('.dismiss').click(function () {
applyZoomInOutAnim('zoomOut');
$('.back-end,.front-end,.dismiss').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).hide();
});
});