[英]jquery show hide not working properly
I've made an animation which fades in and out. 我制作了一个淡入淡出的动画。
I have two buttons $('.point li')
to show two different contents $("#"+classVal+" .table-cell")
我有两个按钮
$('.point li')
显示两个不同的内容$("#"+classVal+" .table-cell")
However, when I click $('.point li')
, I'd like to gradually show its content from white background. 但是,当我单击
$('.point li')
,我希望从白色背景逐渐显示其内容。
But its opacity remained when I click another button and click back. 但是当我单击另一个按钮并单击返回时,它的不透明度仍然存在。
Is there a way to show the content from zero opacity every time I click the button? 每次单击按钮时,有没有办法显示不透明度为零的内容?
var q = $('#intro .table-cell'); //this is a first content to show
var qIndex;
$(window).ready(function(){
$('.point li').click(function(){ //click a button
$('.point li').removeClass('active');
var classVal = $(this).attr('class');
$(this).addClass('active');
q.stop(true,false);
$('.bg > div').css('display','none');
$('.bg > div .table-cell').css('display','none');
$('#'+classVal).css('display','block');
q = $("#"+classVal+" .table-cell");
qIndex = -1;
showNextQ();
});
});
function showNextQ() {
++qIndex;
q.eq(qIndex % q.length).show(2000).delay(1000).hide(2000, function(){
showNextQ();
});
}
I found a solution. 我找到了解决方案。
The reason why the animation's attributes remained is that JQuery store it to a variable. 保留动画属性的原因是JQuery将其存储到变量中。
So I change the second parameter in a function "stop" 所以我在功能“停止”中更改了第二个参数
q.stop(true,false);
to True 变为真实
q.stop(true,true);
which means "jump to end" 意思是“跳到结束”
Than it works 比它有效
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.