我需要这个项目的帮助。 http://natur-perlen.dk/
菜单有一个jquery功能,可以在菜单上移动鼠标时显示图片。我需要图片淡入淡出,而不是像现在这样。更喜欢滑块。这是代码:
<script>
var sourceSwapOut = function () {
$("#slider").css('backgroundImage','url(image/Image-standard.png)');
}
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.attr('data-id');
$("#slider").css('backgroundImage','url(' + newSource +')');
}
$(function () {
$('li.imageHandler').hover(sourceSwap, sourceSwapOut);
});
</script>
<nav id="menu">
<div id='cssmenu'>
<ul>
<li class="img1">
<a href='#'><span>Lejlighed og værelser</span></a>
<ul>
<li class="imageHandler" data-id="image/retro.png">
<a href='retro.html'><span>Retro</span></a>
</li>
<li class="imageHandler" data-id="image/udsigtenslider.png">
<a href='hyggen.html'><span>Hyggen</span></a>
</li>
<li class="imageHandler" data-id="image/Hemsen.png">
<a href='hemsen.html'><span>Hemsen</span></a>
</li>
<li class="imageHandler" data-id="image/udsigtenslider.png">
<a href='udsigten.html'><span>Udsigten</span></a>
</li>
<li class="imageHandler" data-id="#">
<a href='rooms.html'><span>Værelserne</span></a>
</li>
</ul>
</li>
<li class="imageHandler" data-id="image/Kvalitet-og-miljoe.png">
<a href='kvalitetogmiljoe.html'><span>Kvalitet og Miljø</span></a>
</li>
<li class="imageHandler" data-id="image/image-aktiviteter.png">
<a href='aktiviteter.html'><span>Aktiviteter og arragementer</span></a>
</li>
<li class="imageHandler" data-id="image/Priser-og-Booking.png">
<a href='booking-og-priser.html'><span>Priser og booking</span></a>
</li>
<li class="imageHandler" data-id="image/gaestebog.png">
<a href='gaestebog.html'><span>Gæstebog</span></a>
</li>
<li class="imageHandler" data-id="image/Kontakt-os.png">
<a href='kontakt.html'><span>Kontakt</span></a>
</li>
</ul>
</div>
</nav>
希望在这里找到帮助。
答案 0 :(得分:1)
我建议您使用css3
.image{
opacity: 0;
transition: opacity 0.5s;
}
.image.Hovered{
opacity: 1;
}
$('elem').on('mousein', function(){ $(this).addClass('Hovered'); }
$('elem').on('mouseout', function(){ $(this).removeClass('Hovered'); }
答案 1 :(得分:0)
我为此目的使用动画方法,试试这段代码:
var sourceSwapOut = function () {
$('#slider').stop().animate({'opacity': 0}, 500, function(){
$("#slider").css('backgroundImage','url(image/Image-standard.png)').stop().animate({'opacity': 1}, 500);
});
}
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.attr('data-id');
$('#slider').stop().animate({'opacity': 0}, 500, function(){
$("#slider").css('backgroundImage','url(' + newSource +')').stop().animate({'opacity': 1}, 500);
});
}
答案 2 :(得分:0)
以与滑块相同的方式实现它。
您也可以使用#header
作为默认背景。使用CSS将#slider
的不透明度设置为0(您应该将徽标向上移动一级以使其保持可见)。当用户将鼠标悬停在链接上时,只需设置背景并淡入#slider
,然后在用户停止悬停时将其淡出。
有很多方法可以实现这一点。需要注意的关键是你需要多个元素,这样你就可以控制它们的不透明度,使它们淡入淡出。