[英]How do I add smooth transitions to this script
在显示块和隐藏时如何添加平滑过渡:
$(document).ready(function(){
$(".userBox").mouseover(function () {
$(this).find('.inBox').css({ display: "block" });
$(this).find('.boxDisc').css({ display: "block" });
$(".userBox").mouseout(function () {
$(this).find('.inBox').css('display', 'none');
$(this).find('.boxDisc').css('display', 'none');
});
});
});
因为现在它是即时的,而且看起来不太好。 谢谢!
一种方法是使用jQuery淡入淡出方法 :
$(document).ready(function () {
$(".userBox").mouseover(function () {
$(this).find('.inBox').stop().fadeIn('fast');
$(this).find('.boxDisc').stop().fadeIn('fast');
$(".userBox").mouseout(function () {
$(this).find('.inBox').stop().fadeOut('fast');
$(this).find('.boxDisc').stop().fadeOut('fast');
});
});
});
例:
您可以尝试fadeIn和fadeOut:
$(document).ready(function(){
$(".userBox").mouseover(function () {
$(this).find('.inBox').fadeIn(500);
$(this).find('.boxDisc').fadeIn(500);
$(".userBox").mouseout(function () {
$(this).find('.inBox').fadeOut(500);
$(this).find('.boxDisc').fadeOut(500);
});
});
});
使用show('slow')
, hide('slow')
, toggle('slow')
等jQuery方法将使过渡更加平滑。
其他有用,有趣且出色的方法是.animate()和jQuery ui的幻灯片效果( https://api.jqueryui.com/slide-effect/ )
干杯!
编辑:我也要写有关fadeIn和fadeOut方法的文章。 但是,莫里斯·佩里(Maurice Perry)更快地举例说明了这些问题:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.