1

我有一个带有 CSS 的 IMG，它使用 :hover 来显示背景。有没有一种简单的方法可以使用 jQuery 淡入背景而不是立即出现？

我目前的代码是：

HTML: <img id="home-logo" src="path/logo-home.png">`
CSS: #home-logo:hover { background: url(path/logo-back.png) right bottom no-repeat;}
4

3 回答 3

0

是的！！！你可以用这个...

$('#home-logo').hover(function(){
  $(this).fadeIn('slow', function() {
  //do something  
  });
 });

有关更多信息，您应该查看本教程。淡入

于 2011-01-27T06:15:18.417 回答
0

也许你需要淡化你的不透明度，在这种情况下你可以使用 fadeTo 方法。第一个参数是持续时间或速度，第二个参数是不透明度值。

查询代码：

    $('#home-logo').hover(
    function(){
      $(this).fadeTo('slow',0.2);
    },
    function(){
      $(this).fadeTo('slow', 1.0);
    });

HTML 代码：

<img id="home-logo" src="path/logo-home.png">

演示

于 2011-01-27T07:36:05.117 回答
0

我想通了，发现最好的方法是使用两个图像而不是背景：

HTML:
    <img id="home-link" src="path/logo.gif"><img id="home-fade" src="path/logo-fade.gif">

CSS:
    #home-link { cursor:pointer; }
    #home-fade { display:none; }

JS:
    $(document.body).hover(function () {
          $("#home-fade").fadeIn('slow');
        },function(){
          $("#home-fade").fadeOut('slow');
        });
于 2011-01-27T14:42:25.053 回答