jquery - jQuery锚悬停淡出

Question

是否可以在悬停时创建 jquery“淡入淡出”效果（在带有图像的锚点上）？

HTML

<ul id="list">
    <li>
        <a target="_blank" href="http://google.com">
            <img src="http://www.littlegiant.co.nz/wp-content/uploads/2012/01/Meccano-293x170.jpg" alt="" />
        </a>
    </li>
</ul>

CSS

#list li a img {
    position: relative;
    z-index: -1;
}

#list li a {
    display: block;
    width: 293px;
    height: 170px;
}
#list li a:hover {
    background: red;
    width: 200px;
    height: 50px;
}

这是我到目前为止所拥有的：http: //jsfiddle.net/ecFBK/4/

当您将鼠标悬停在正确的红色上时 - 我只是不知道如何使用 jquery 使其淡入淡出。请不要 CSS3 建议。

Answer 1

用你的 HTML 标记是不可能的。您需要淡入一个span元素，而不是a实际保存您图像的元素！

jsFiddle 演示

jQuery：

$('#list li a').hover(function(){
   $('span', this).stop().fadeIn(500);
}, function(){
  $('span', this).stop().fadeOut(500);    
});

HTML：

<ul id="list">
    <li>
        <a target="_blank" href="http://google.com">
            <img src="http://www.littlegiant.co.nz/wp-content/uploads/2012/01/Meccano-293x170.jpg" alt="" />
            <span>Description here!</span>
        </a>
    </li>
</ul>

CSS：

#list li a {
    display: block;
    position:relative;
    width: 293px;
    height: 170px;
}

#list li a img {
    position: relative;
    z-index: -1;
}

#list li a span {
    position:absolute;
    left:0px;
    display:none;
    background:red;      
}

Answer 2

您可以通过向链接添加覆盖来伪造它。您需要添加position: relative到链接 CSS，并删除a:hoverCSS，然后您可以为 jQuery 执行以下操作：

$('#list li a').hover(function(ev){
    if (!$(this).find('.hover').length) {
        $('<span class="hover">').css({
            'background-color': 'red',
            'display': 'inline-block',
            'opacity': 0,
            'width': 293,
            'height': 170,
            'position': 'absolute',
            'top': 0,
            'left': 0
        }).appendTo($(this));
    }
    $(this).find('.hover').stop(true, true).animate({'opacity': 1}, 2000);
}, function(ev){
    $(this).find('.hover').stop(true, true).animate({'opacity': 0}, 1000);
});

看演示