如何在jquery中使用fadeTo等动画标签和css更改语句？
[英]How to use fadeTo, etc. animation tags along with a css change statement in jquery?
问题描述
I have many statements like this: 
我有很多这样的陈述：
$('#prof').css('background-image','url("images/select2.png")');
I want the change to happen with an animation effect like FadeIn etc. I am using this but it is not working: 我希望改变发生像FadeIn等动画效果。我正在使用它，但它不起作用：
$('#prof').css('background-image','url("images/select2.png")').fadeIn( "slow");
neither is this working: 这也不起作用：
$('#prof').fadeIn( "slow").css('background-image','url("images/select2.png")');
Can anyone suggest what to do, or what I am doing wrong? 任何人都可以建议做什么，或者我做错了什么？ I am an absolute beginner in the web development. 我是网络开发的绝对初学者。
After reading the answers, I am adding a few more details to make the problem more clear: 阅读完答案后，我将添加更多细节以使问题更加清晰：
The situation is that there is a sort of sidebar index, containing elements like about, experience, etc. The divs are already visible, what I am doing is when a particular div is selected I want the background image of the div to change. 情况是有一种侧边栏索引，包含像about，experience等元素.divs已经可见，我正在做的是当选择一个特定的div我希望div的背景图像改变。 But with the code I am using, the change is happening but too suddenly, I want the transition to be smooth and more aesthetically pleasing, here is the code for an entire section: 但是使用我正在使用的代码，变化正在发生，但是太突然了，我希望过渡平滑且更美观，这里是整个部分的代码：
$('#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'); });
2 个解决方案
解决方案1
0 已采纳 2015-02-20 06:07:57
You can't directly fade-in the background image property of an element. 您不能直接淡入元素的背景图像属性。 Instead, you can fade in an entire element, so create a div that contains the background image, and fade that in. 相反，您可以淡入整个元素，因此创建一个包含背景图像的div，并将其淡入。
CSS CSS
#bg {
background-image: url('images/bg.jpg');
z-index: -1;
}
HTML HTML
<body>
<div id="bg"></div>
<div id="prof"></div>
</body>
Javascript 使用Javascript
$('#prof').click(function(){
$("#bg").fadeOut(function() {
$("#bg").css({background : url('images/select2.jpg') });
$("#bg").fadeIn(300);
}, 300);
});
解决方案2
0 2015-02-20 06:10:43
you can try this like in css code=you can put this 你可以试试这个像css代码=你可以把它
#prof
{
display:none;
}
in jquery code you can set like this 在jquery代码中你可以像这样设置
$('#prof').css('background-image','url("images/select2.png")');
$('#prof').fadeIn("slow");
hopefully this may help 希望这可能有所帮助
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.