代码之家 › 专栏 › 技术社区 › Al-m

如何使用jQuery淡入图像?

fade setinterval arrays jquery javascript

Al-m · 技术社区 · 7 年前

基本上,我制作了一组图像,并设法随机循环,以改变背景。它工作得很好。以固定的时间间隔和一切。但这种转变过于突然/刺耳。

我怎样才能让它慢慢淡入淡出呢?这就是与此相关的全部代码,甚至有一个按钮可以触发更改,而不是等待。我也想让它消失!非常感谢。

var backs= [ "bike-1505039_1280.jpg",

"bananas-698608_1280.jpg",

"camera-813814_1280.jpg",

"chevrons-937583_1280.jpg",

"music-1283877_1280.jpg",

"pattern-26442_1280.png",

"people-2587310_1280.jpg",

"puppy-1903313_1280.jpg",

"road-166543_1280.jpg",

"stone-1664918_1280.jpg",

"street-1209403_1280.jpg",

"technology-2643270_1280.jpg"
];

setInterval(function() {

      $("BODY").css("background-image", "url(" + backs[Math.floor(Math.random() * backs.length)] + ")");
}, 10000);



$("#backChange").on('click', function(event) {
  $("BODY").css("background-image", "url(" + backs[Math.floor(Math.random() * backs.length)] + ")");
});

2 回复 | 直到 6 年前

Phuong Nguyen 7 年前

由于您使用图像作为身体的背景,我建议使用CSS3作为背景属性:

CSS3 Fade Effect

user8507737 user8507737 7 年前

使用动画属性淡入

$('background-image').animate({ opacity: 1 }, { duration: 3000 });

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前