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

I have a site that I change the background of the site when you hover over links. It works fine, but I would rather load all of the images and then change the opacity to make the current one visible, it seems like it will make the transitions smoother.

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

Here is the html

这是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>

Here is the css;

这是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%;
}

This is the jquery function that swaps the images;

这是交换图像的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');
});
});
    });

I would like to set the div with all of the possible images just with the opacity of the main background image set to 1;

我想用所有可能的图像设置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>

Then use jquery to animate the opacity changing from the previous background image to whatever the new one is, then have it default to the original when a user moves out of the hover. Any suggestions, I am unsure how to tell it to take the newimg variable and adjust the opacity of that image to 1, and the original image to 0.

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

2 个解决方案

#1

Maybe something like this to get you on the right track:

也许这样的事情可以让你走上正轨:

 <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;
}

Script

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

EDIT BASED ON COMMENT:

基于评论的编辑:

Try this

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

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

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

Here is the code I am trying to use, it works fine until I change it to use the newimg variable.

这是我试图使用的代码,它工作正常,直到我更改它以使用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);
    })
    });

#2

I worked with a previous answer and ended up changing to the mouseover and mouseout functions. This does exactly what I want it to. Thanks for pointing me in the right direction.

我使用了之前的答案,最终改为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');
});
});

#1