javascript - FadeIn / FadeOut 自定义幻灯片编程错误

Question

我试图在这个网站的幻灯片中获得“淡入”或“淡出”效果：www.2eenheid.de。我尝试了代码打击，背景图像应该褪色，但它只会使菜单项褪色。我理解它可能在这条线上的某个地方$('ul.slideshow-menu').find('a').hover(function(){。

如何在背景图像上淡入淡出时保持此悬停功能？有人有什么想法吗？

编辑 我只希望背景图像褪色。不是菜单项。

Javascript：

    <script type="text/javascript">
    $(function(){
        var imgsrc = '';
        $('ul.slideshow-menu').find('a').hover(function(){

          $(this).fadeTo('slow', 1);
          $('.pikachoose').css({ 'background-image' : 'url('+$(this).attr('src')+')' });
           imgsrc = $('.pikachoose').css('background-image');

         }, function(){
          $(this).fadeTo('slow', 1);
          $('.pikachoose').css({ 'background-image' : 'url('+imgsrc+')' });
    });

    });
    </script>

HTML：

            <div id="slideshow-main">
                    <ul class="slideshow-menu">
                        <li class="<?php if (is_page('supportenbeheer')) { echo "current_page_item"; }?>"><a title="Support / Beheer" href="/supportenbeheer" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-4.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-4.jpg" alt="2Eenheid"/><span>Support / Beheer</span></a></li>
                        <li class="<?php if (is_page('implementatie')) { echo "current_page_item"; }?>"><a href="/implementatie" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-5.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-5.jpg" alt="2Eenheid"/><span>Implementatie</span></a></li>
                        <li class="<?php if (is_page('cloud')) { echo "current_page_item"; }?>"><a href="/cloud" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-11.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-11.jpg" alt="2Eenheid"/><span>Cloud</span></a></li>
                        <li class="<?php if (is_page('webhosting-en-hosting')) { echo "current_page_item"; }?>"><a href="/webhosting-en-hosting" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-8.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-8.jpg" alt="2Eenheid"/><span>Webhosting / Hosting</span></a></li>
                        <li class="<?php if (is_page('unit4-multivers')) { echo "current_page_item"; }?>"><a href="/unit4-multivers" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-2.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-2.jpg" alt="2Eenheid"/><span>Unit4 Multivers</span></a></li>
                    </ul>
                </div>      

Answer 1

我认为你需要这样的东西：

$(function () {
    var imgsrc = '';
    $('ul.slideshow-menu').find('a').hover(function () {
        imgsrc = $('.pikachoose').css('background-image');
        var newImg = $(this).attr('src');
        $('.pikachoose').stop().fadeOut('slow', function () {
            $(this).css({
                'background-image': 'url(' + newImg + ')'
            }).fadeIn('slow');
        });

    }, function () {
        $('.pikachoose').stop().fadeOut('slow', function () {
            $(this).css({
                'background-image': imgsrc
            }).fadeIn('slow');
        });
    });

});