gpt4 book ai didi

javascript - 如何在 jquery 中使用 fadeTo 等动画标签以及 css 更改语句?

转载 作者:行者123 更新时间:2023-11-28 08:23:54 26 4
gpt4 key购买 nike

我有很多这样的陈述:

$('#prof').css('background-image','url("images/select2.png")');

我希望通过淡入等动画效果进行更改。我正在使用它,但它不起作用:

$('#prof').css('background-image','url("images/select2.png")').fadeIn( "slow");

这也不行:

$('#prof').fadeIn( "slow").css('background-image','url("images/select2.png")');

任何人都可以建议做什么,或者我做错了什么?我是网络开发的绝对初学者。

阅读答案后,我添加了更多细节以使问题更清楚:

情况是有一种侧边栏索引,包含诸如关于、经验等元素。div 已经可见,我正在做的是当选择特定的 div 时我希望 div 的背景图像改变。但是对于我正在使用的代码,变化正在发生但太突然了,我希望过渡能够平滑且更美观,这是整个部分的代码:

$('#about').click(function(){
$('#contents').css('margin-left','8%');
$('#contents').css('font-family', "'Quicksand', sans-serif");
$('#contents').css('font-size', '1.2em');
$('#topbar').fadeTo( 2000 , 1);
$('#name').text('Dip Ranjan Chatterjee');
$('#contents').load("about.html #contents > *");
$('#about').css('background-image','url("images/select2.png")');
$('#edu').css('background-image','');
$('#prof').css('background-image','');
$('#portfolio').css('background-image','');
$('#sidebar').css('background-image','url("images/sidebar3.png")');
$('#about').css('color','black');
$('#about').css('width','55%');
$('#about').css('margin-top','25%');
$('#about').css('padding-left','65px');
$('#about').css('padding-bottom','75px');
$('#about').css('padding-top','70px');
$('#about').css('padding-right','15px');


$('#edu').css('color','white');
$('#edu').css('width','70%');
$('#edu').css('padding-left','45px');
$('#edu').css('padding-bottom','10px');
$('#edu').css('padding-top','0px');


$('#prof').css('color','white');
$('#prof').css('padding-bottom','0px');
$('#prof').css('padding-top','0px');

$('#portfolio').css('color','white');
$('#portfolio').css('padding-bottom','0px');
$('#portfolio').css('padding-top','0px');


});

最佳答案

您不能直接淡入元素的背景图像属性。相反,您可以淡入整个元素,因此创建一个包含背景图像的 div 并将其淡入。

CSS

   #bg {
background-image: url('images/bg.jpg');
z-index: -1;
}

HTML

<body>
<div id="bg"></div>
<div id="prof"></div>
</body>

Javascript

    $('#prof').click(function(){
$("#bg").fadeOut(function() {
$("#bg").css({background : url('images/select2.jpg') });
$("#bg").fadeIn(300);
}, 300);
});

Docs

关于javascript - 如何在 jquery 中使用 fadeTo 等动画标签以及 css 更改语句?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28622553/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com