Question

我有一个网站，当您将鼠标悬停在链接上时，我会更改网站的背景。它运行正常，但我宁愿加载所有图像，然后更改不透明度以使当前的图像可见，似乎它将使过渡更平滑。

这是html

<div id="bg">
<img src="images/bg.jpg" alt="">
</div>



<div class="mainnav">
<img src="images/hsna-logo.png" class="logo">
<ul class="nav">
<li><a href="#" class="hoverbg" data-bgsrc="images/bg1.jpg">LINK1</a></li>
<li><a href="#" class="hoverbg" data-bgsrc="images/bg2.jpg">LINK2</a></li>
<li><a href="#" class="hoverbg" data-bgsrc="images/bg3.jpg">LINK3</a></li>
<li><a href="#" class="hoverbg" data-bgsrc="images/bg4.jpg">LINK4</a></li>
</ul>
</div>

这是css;

#bg {
position: fixed; 
top: -50%; 
left: -50%;
width: 200%; 
height: 200%;
}
#bg img {
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
margin: auto; 
min-width: 50%;
min-height: 50%;
}

这是交换图像的jquery函数;

$(function(){
$('.hoverbg').hover(
  function(){
    var newimg = $(this).data("bgsrc");
    $('#bg img').fadeOut('slow',function(){
        $(this).attr('src', newimg);
        $(this).fadeIn('slow');
    });
},
function(){
    $('#bg img').fadeOut('slow',function(){
        $(this).attr('src', 'images/bg.jpg');
        $(this).fadeIn('slow');
});
});
    });

我想用所有可能的图像设置div，只需将主背景图像的不透明度设置为1;

 <div id="bg">
 <img src="images/bg.jpg" alt="" opacity="1">
 <img src="images/bg2.jpg" alt="" opacity="0">
 <img src="images/bg3.jpg" alt="" opacity="0">
 </div>

然后使用jquery为不透明度设置动画，从之前的背景图像更改为新的背景图像，然后在用户移出悬停时将其默认为原始图像。任何建议，我不确定如何告诉它采取newimg变量并将该图像的不透明度调整为1，并将原始图像调整为0.

Answer 1

这样的事情可能会让你走上正轨：

 <div id="bg">
     <img src="images/bg.jpg" alt="" class='image active'>
     <img src="images/bg2.jpg" alt="" class='image inactive'>
     <img src="images/bg3.jpg" alt="" class='image inactive'>
 </div>

CSS：

#bg{
    position:relative;
    width: /* Set the width */;
    height: /* Set the height */;
}

.active{
    opacity: 1;
}

.inactive{
    opacity: 0;
}

.image{
    position: absolute;
    top: 0;
    left: 0;
}

脚本

$('.image').hover(function(){
    $('.image').animate({
        opacity : 0
    }, 500);
    $(this).animate({
        opacity : 1
    }, 1000);
});

基于评论的编辑：

试试这个

$('.hoverbg').hover(function(){
    $('#bg img').animate({
        opacity : 0
    }, 500);

    $('#bg img').attr('src', $(this).attr('data-bgsrc'));

    $('#bg img').animate({
        opacity : 1
    }, 1000);
});

以下是我尝试使用的代码，它可以正常工作，直到我将其更改为使用newimg变量。

$(document).ready(function(){
$('.hoverbg').hover(
    function(){
      var newimg = $(this).attr('data-bgsrc');
      $('#bg img [src="'+ newimg +'"]').animate({opacity:1},1000);
      $('#bg img [src!="'+ newimg +'"]').animate({opacity:0},500);
    })
    });

Answer 2

我使用了之前的答案，最后改为mouseover和mouseout功能。这正是我想要的。谢谢你指点我正确的方向。

$(document).ready(function(){
   $('.hoverbg').mouseover(
function(){
   var newimg = $(this).attr('data-bgsrc');
   $('#bg img[src!="'+newimg+'"]').attr('class', 'inactive');
   $('#bg img[src="'+newimg+'"]').attr('class', 'active');
});
$('.mainnav ul').mouseout
(function(){
   $('#bg img[src="images/bg.jpg"').attr('class', 'active');
   $('#bg img[src!="images/bg.jpg"]').attr('class', 'inactive');
});
});

将悬停功能从图像交换更改为不透明度更改

2 个答案: