此问题已通过更改闪烁功能以包含对所有对象的排序来解决。
如果您有兴趣,这是最新的jsfiddle。 http://jsfiddle.net/6UjF3/4/
我正在尝试根据用户选择创建一个显示不同部分的页面。 单击一个按钮时,它会以动画顺序显示两个对象,一个对象将显示在另一个对象之后。每次单击相应按钮时都需要重复此效果。现在的问题是当用户在两个按钮之间切换时,闪烁动画并不总是显示正确的对象顺序。
这是我使用的功能:
$(document).ready(function()
{
function blinkObject () {
$('.blink').fadeTo(0,0);//hide at first
$('.blink').each(function(i) {//for each blink
$(this).delay(i*1500).animate({opacity: '1'}, 1000);
});
}
$("#b1").click(function(){
$('.blink').stop(true,true);
$(".page1").css({"display": "block"});
$(".page2").css({"display": "none"}); //
blinkObject ();
});
$("#b2").click(function(){
$('.blink').stop(true,true);
$(".page1").css({"display": "none"});
$(".page2").css({"display": "block"}); //
blinkObject ();
});
});
这是jsfiddle:http://jsfiddle.net/6UjF3/3/
ps:我用其中一个答案更新了jsfiddle,现在它已经运行得很好,除了来回切换几次后订单不正确。
答案 0 :(得分:2)
这可能会更容易
的jQuery
function blinkObject(p) {
$('.page').eq(p).show().children('.blink').stop(false,true).each(function(i) {//for each blink
$(this).stop(true,false).fadeTo(0,0).delay(i*1000).animate({opacity: '1'}, 1000);//fadein
}).end().siblings('.page').hide();//hide siblings
}
$('.page').first().siblings('.page').hide();//hide all but first
$(".but").each(function(i){
$(this).on('click', function() {
blinkObject(i);//run blink
});
});
我在页面上添加了一类page
,在按钮上添加了一类but
。
答案 1 :(得分:1)
这是我想出来的,但我必须这样做,所以我无法继续提供帮助。
$("#b1").click(function(){
$('.blink').stop(true,true);
$(".page1").removeClass("invisible");
$(".page1").addClass("visible"); //
$(".page2").removeClass("visible"); //
blinkObject ();
});
关键是stop()。这将阻止其他动画运行并使其切换更顺畅。
答案 2 :(得分:0)
您忘记从 page1 中删除隐身类,这可行。
$("#b1").click(function(){
$(".page1").removeClass("invisible");
$(".page1").addClass("visible"); //
$(".page2").removeClass("visible"); //
blinkObject ();
});