Question

jquery 怎么让背景渐现

我问下，当鼠标没移动到首页的时候，就出现首页没有。怎么让鼠标移动到“首页”的时候，背景渐现出来。

Answer 1

你首先要将一个效果分解成单一步骤:

1. 既然是鼠标移上去的时候,说明这有一个hover或类似的触发事件

2. 调整的是背景,就是要给元素添加背景图了,有多种语法可实现

   例如:$("#a").attr("background","url(abc.jpg) left top no-repeat");

   
   

3. 渐现是用fadeIn()方法

OK,这样就把效果都分析出来了,我就写一种吧,你若明白了就可以一举得三了,我假设首页是一个按钮,当鼠标移上去显示按钮的背景,移走后就恢复原来状态:

***A:这是简单的移上加图,移走去图的方法***

$("input").hover(function(){

    $(this).attr("background","url(url(abc.jpg) left top no-repeat)");

},function(){

    $(this).attr("background","");

});

***B:这是调用已经写好的背景样式并渐入和渐出***

$("input").hover(function(){

    $(this).addClass(".input").fadeIn();

},function(){

    $(this).removeClass(".input").fadeOut();

});

如果你没看明白hover,addClass,removeClass,最好看一下jquery帮助文档

追问

您好。
$("input").hover(function(){
$(this).addClass(".input").fadeIn();

},function(){
$(this).removeClass(".input").fadeOut();
});

如果用这个的话，那么首页那两个字也会不见的。怎么才能让首页那两个字一直在，就只有背景会变呢。

追答

呵呵，我只是举个例子而已，我这个例子是让按钮添加.input样式并渐引渐出，明白这个道理后，你现在只想隐藏背景图片，那就把选择器选择到背景图片不就好了$("")这个写法就是选择器，我的例子里是写input，说明我选择了按钮，你呢...明白了吧

追问

那背景图片和文字不就不能在同个标签了。
比如 首页 只能这样了？

追答

jquery选择器，可以同时控制多个元素的，例如$(".input,span")这样就控制了按钮和span，你必须先清楚语法再进行操作，不然，你的问题只会有增无减

追问

不是，我是说“只能用SPAN元素做背景，然后渐现。而不能直接用li元素是吧？如果用li做渐现那么首页也会跟着变没了。”
首页
我就是想问，首页两个字不动，而li的背景色会渐现出来。

追答

是的，因为你控制的是li元素，而首页二字是被包含着，所以首页二字也会不见掉，
但你只是想控制背景而已，所以根本没必要控制li元素，而是应该控制li的背景元素，这样就跟字无关了，首页就会乖乖的呆在那了

Answer 2

如果是控制背景颜色的和背景图片的渐隐和渐现,那么很遗憾的告诉你,不带任何插件的原装jquery是没法办到的;但可以通过jquery的easing插件来实现,具体用法自行百度;

如果是控制页面元素的显示和隐藏,使用的效果是渐隐和渐现,jquery可以,fadeIn和fadeOut方法(可能拼错了,具体自行百度;)

如果用原装jquery的话,其实变通一下也可以实现.

你可以在首页上再覆盖一个div一类的层,用它来做背景,直接用jquery的fade方法控制这个层的显示和隐藏一样能达到你想要的效果.但是这个方法需要一定的css基础,毕竟你得知道怎么覆盖这个层上去还得让首页这几个字显示出来;

提示: 定位和z-index

Answer 3

首先要将一个效果分解成单一步骤：
既然是鼠标移上去的时候,说明这有一个hover或类似的触发事件。
调整的是背景,就是要给元素添加背景图了,有多种语法可实现。

例如：
$("#a").attr("background","url(abc.jpg) left top no-repeat");

渐现是用fadeIn()方法：
OK,这样就把效果都分析出来了,我就写一种吧,你若明白了就可以一举得三了,我假设首页是一个按钮,当鼠标移上去显示按钮的背景,移走后就恢复原来状态:
***A:这是简单的移上加图,移走去图的方法***
$("input").hover(function(){
$(this).attr("background","url(url(abc.jpg) left top no-repeat)");

},function(){
$(this).attr("background","");
});
***B:这是调用已经写好的背景样式并渐入和渐出***
$("input").hover(function(){
$(this).addClass(".input").fadeIn();

},function(){
$(this).removeClass(".input").fadeOut();
});

Answer 4

很简单jquery动画修改透明度即可。