如何使用jquery使div的转换速度相同？

-1

我使用jQuery在单击时将div转换进出。我遇到的第一个问题是，在页面加载后，第一个div不会在第一个div淡出的同时淡入。这会导致背景显示，而点击的div淡入。我遇到的第二个问题是转换速度因div而异。有些速度非常快，其他速度较慢。这里是webpage。这里是jQuery代码：如何使用jquery使div的转换速度相同？

/** 
* @jQuery for Slideshow 
*/ 

$("#home_splash1").show(); 

$('#btn2, #btn2-2').click(function(e) { 
    $('#home_splash1, #home_splash3').fadeOut('2000', function() { 
     $('#home_splash2') 
     .css('visibility', 'visible') 
     .fadeIn('2000'); 
    }); 
}); 

$('#btn1, #btn1-2').click(function(e) { 
    $('#home_splash2, #home_splash3').fadeOut('2000', function() { 
     $('#home_splash1') 
     .css('visibility', 'visible') 
     .fadeIn('2000'); 
    }); 
}); 

$('#btn3, #btn3-2').click(function(e) { 
    $('#home_splash1, #home_splash2').fadeOut('2000', function() { 
     $('#home_splash3') 
     .css('visibility', 'visible') 
     .fadeIn('2000'); 
    }); 
});

来源

2014-04-03 imcadams

在您的文章中包含相关的HTML。请参阅：http://stackoverflow.com/help/how-to-ask – Sparky

当'fadeIn'自动处理制作隐藏元素时，为什么在'.fadeIn（）'中使用'.css（'visibility'）'出现？ – Sparky

我看着你的实际代码，看起来你在某些情况下使用字符串作为持续时间而不是整数。 – jwatts1980

正如@ jwatts1980说，你有字符串和整数作为时间之间的混合。

我测试过了，如你所说，没有工作。一旦我打开你的脚本并在本地进行编辑，它就可以完美运行，因此请将'2000'更改为2000。只有得到作为持续时间传递的字符串是'slow'和'fast'

$(document).ready(function() { 

    $('#home_splash1').show(); 

    $('#btn2, #btn2-2').click(function(e) { 
     $('#home_splash1, #home_splash3').fadeOut(2000, function() { 
      $('#home_splash2').css('visibility', 'visible').fadeIn(2000); 
     }); 
    }); 

    $('#btn1, #btn1-2').click(function(e) { 
     $('#home_splash2, #home_splash3').fadeOut(2000, function() { 
      $('#home_splash1').css('visibility', 'visible').fadeIn(2000); 
     }); 
    }); 

    $('#btn3, #btn3-2').click(function(e) { 
     $('#home_splash1, #home_splash2').fadeOut(2000, function() { 
      $('#home_splash3').css('visibility', 'visible').fadeIn(2000); 
     }); 
    }); 
});

也不是必需的文件准备功能，你有这个在你的页面的底部，所以它会反正加载一切后人。从jQuery的API文档

引用：

如果任何其他串提供，或者如果省略了持续时间参数，则使用400毫秒的默认持续时间。

来源

2014-04-03 21:34:21 Spedwards

使用DOM准备好的处理程序是一个好习惯，使用它并没有缺点，即使它可能是多余的。 – Sparky

@imcadams请将此标记为适用于您的答案。 – Spedwards

谢谢你们，抱歉发布了错误的代码。我测试了它，它修复了幻灯片之间的速度差异。尽管如此，它仍然在第一张幻灯片上发生了变化。第一张幻灯片淡出，新的幻灯片突然出现，而不是淡入。任何想法如何我可以解决这个问题？我已经更新了[网页]（http://www.imcadams.com/indexnew.html#），以了解我的意思。 – imcadams

，当你调用一个jQuery动画功能被称为“回调”功能，您可以通过第二个参数：当该功能调用完成后，“回叫”回调功能。在你的情况下，这意味着它被称为后动画已完成所有其步骤。

该jQuery documentation for fadeOut有更多的细节。

为了解决这个问题，您需要从回调函数中删除.fadeIn()，并同时运行.fadeOut()和.fadeIn()。幸运的是，jQuery动画是“异步”功能，这意味着他们似乎立即完成：只要你调用.fadeOut()它立即“结束”，处理移动到下一行。这意味着您可以将许多想要同时发生的动画放在一起。

改变你的代码是这样的（JSFiddle）会给你你想要的效果：


$('#show-splash-1').click(function(e) { 
    $('#splash2, #splash3').fadeOut(2000); 
    $('#splash1').fadeIn(2000); 
});

来源

2014-04-03 21:13:46 harbichidian

这并不解释观察到的不一致性。请参阅@ jwatts1980的评论。 – Sparky

如何使用jquery使div的转换速度相同？

回答

相关问题