Изменение функции наведения от смены изображения до изменения непрозрачности

0

У меня есть сайт, на котором я изменяю фон сайта, когда вы наводите курсор на ссылки. Он отлично работает, но я предпочел бы загружать все изображения, а затем изменять непрозрачность, чтобы сделать текущую видимой, похоже, что она сделает плавки более плавными.

Вот 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.

  • 0
    Имейте в виду, что хотя $(this).data('attr') будет читать data-attr , но при записи он будет использовать экземпляр памяти элемента в прошлый раз, когда я проверял. $(this).attr('data-attr') обычно безопаснее imo.
Теги:

2 ответа

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);
    })
    });
Поделиться
  • 0
    Это гораздо более элегантно, но работает для пользователя, который наводит курсор на изображение, а не на ссылку в другом элементе div. У моего mainnav div есть источник изображения, который я сейчас передаю скрипту для загрузки другого изображения, какие-либо мысли о том, как передать его для обновления правильного изображения?
  • 0
    Я добавил редактирование выше. Проверьте это и посмотрите, работает ли это для вас.
Показать ещё 2 комментария
0

Я работал с предыдущим ответом и в итоге перешел на функции мыши и мыши. Это делает именно то, что я хочу. Спасибо, что указал мне в правильном направлении.

$(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');
});
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню