Question

菜单有一个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>

希望在这里找到帮助。

Answer 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'); }

Answer 2

我为此目的使用动画方法，试试这段代码：

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

}

Answer 3

以与滑块相同的方式实现它。

您也可以使用#header作为默认背景。使用CSS将#slider的不透明度设置为0（您应该将徽标向上移动一级以使其保持可见）。当用户将鼠标悬停在链接上时，只需设置背景并淡入#slider，然后在用户停止悬停时将其淡出。

有很多方法可以实现这一点。需要注意的关键是你需要多个元素，这样你就可以控制它们的不透明度，使它们淡入淡出。

Jquery淡入/淡出

3 个答案: