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标签（隐藏），将下一个图像加载到图像标签中，然后将其淡入。这应该可以让您进行相当简单的过渡。

从那里你可以看到在图像中滑动以获得更加花哨的东西。