jquery鼠标悬浮翻转缩略图

收藏

jquery hover鼠标悬停图片特效，当鼠标滑过品牌图片，隐藏的图片会翻转过来。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

品牌图片列表

<div class="brand">
    <a target="_blank" href="http://www.erdangjiade.com/"><img alt="兰芝" src="images/20121119104931.jpg" /></a>
    <a target="_blank" href="http://www.erdangjiade.com/"><img alt="丝塔芙" src="images/20121015052055.jpg" /></a>
    <a target="_blank" href="http://www.erdangjiade.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
</div>

//品牌翻转
var allBrandAnimate = function(t, d) {
    if (t.find('.brand b').length != 0) {
        return false;
    }
    t.find('.brand a').each(function() {
        $(this).append('<b>' + $(this).find('img').attr('alt') + '</b>')
    });
    t.find('.brand a').hover(function() {
        $(this).find('img').stop().animate({'height': 0, 'top': '35px'}, d, function() {
            $(this).hide().next().show();
            $(this).next().animate({
                'height': '70px',
                'top': '0'
            }, d);
        });
    }, function() {
        $(this).find('b').animate({'height': 0, 'top': '35px'}, d, function() {
            $(this).hide().prev().show();
            $(this).prev().animate({
                'height': '70px',
                'top': '0'
            }, d);
        });
    });
}
allBrandAnimate($('.allbrand'), 80);