jquery中的图像翻转效果？

Question

这是我的代码-

$('.smenu li').mouseover( function(){
        var src = $(this).find('a').attr('href');
        $('.hbg').css('background-image', 'url(' + src + ')');
        });

html代码-

<div class="smenu">
                <ul>
                  <li ><a href="images/hosp.jpg"><img src="images/menu_hosp.jpg" border="0"></a></li>
                  <li ><a href="images/edu.jpg"><img  src="images/menu_edu.jpg" border="0"></a></li>
                  <li ><a href="images/enter.jpg"><img  src="images/menu_enter.jpg" border="0"></a></li>
                  <li ><a href="images/retail.jpg"><img  src="images/menu_retail.jpg" border="0"></a></li>                    
                </ul>
              </div>

这工作正常，但是我如何在图像更改期间设置一些翻转效果，因为现在它只是通过鼠标悬停在闪光灯上来更改背景图像，我想要一些淡入淡出或者其他什么...

Answer 1

我以前也遇到过这样的问题。您需要获取当前显示的图像并将其放入背景中。然后在背景（隐藏）上注入一个 img 标签，将下一个图像加载到图像标签中，然后将其淡入。这将为您提供一个相当简单的过渡。

从那里您可以查看在图像中滑动以获得更奇特的东西。