0

我试图获得类似于您在此示例中悬停图像时看到的效果： link。

当您将图像悬停在图像上时，会显示一个 div，一旦您将鼠标移出 div，该 div 就会隐藏。

图片尺寸为：920x300

我试过没有运气：

$('.my-img').hover(function(){
    $('.my-div').animate({left: '0px'}, 1000)
}, function(){
    $('.my-div').animate({left: '-920px'}, 1000)
});

有关 css 和 html 的更多信息：

    .my-wrapper{
        position: relative;
    }

    .my-div{
        position: absolute;
        background: red;
        height: 300px;
        width: 920px;
        left: -920px;

    }

<div class="my-wrapper">
<div class="my-div">some text here</div>
<img ... /img>
</div>
4

2 回答 2

1

为 my-div 添加一个容器

<div class="rel-wrap">
    <img src="http://placekitten.com/g/920/300" width="920" height="300" class="my-img">
    <div class="my-div">
        Redbox
    </div>
</div>

将位置设置为容器的相对位置

.rel-wrap {
    position:relative;
    width:920px;
    height:300px;
    border: solid 1px #ccc;
}

并将顶部和左侧应用于 my-div

.my-div{
        position: absolute;
        background: red;
        width: 920px;
        height: 300px;
        left: -940px; /*a little far left than the required block*/
        top: 0px;
}

我在动画中添加了 1 秒的延迟（回调之前）。

$(document).ready(function(e) {
    $('.my-img').hover(function(){
        $('.my-div').animate({left: '0px'}, 1000)
        }, function(){
        $('.my-div').delay( 1000).animate({left: '-940px'}, 1000)
    });
});

代码：http: //jsfiddle.net/babumxx/Y4wC4/8/

预览：fiddle.jshell.net/babumxx/Y4wC4/8/show/

您也可以分两部分进行。在mouseenter上显示并在mouseout上隐藏 

$(document).ready(function(e) {
    $('.my-img').mouseenter(function(){
        $('.my-div').animate({left: '0px'}, 1000);
    });
    $('.my-img').mouseout(function(){
        $('.my-div').delay( 1000).animate({left: '-940px'}, 1000);
    }); 
});

在这里小提琴：jsfiddle.net/babumxx/Y4wC4/9/

由于您想保留红块，您可以在容器上应用鼠标，这将解决这个问题。- 小提琴：http: //jsfiddle.net/babumxx/Y4wC4/10/

$(document).ready(function(e) {
    $('.my-img').mouseenter(function(){
        $('.my-div').animate({left: '0px'}, 1000);
    });

    //Trigger hide, when mouse leaves rel-wrap
    $('.rel-wrap').mouseleave(function(){
        $('.my-div').delay( 1000).animate({left: '-940px'}, 1000);
    }); 
});

希望这可以帮助。

于 2013-10-21T11:06:01.177 回答
0

像这样修改 div css 并重试：

.my-div { position: relative; }
于 2013-10-21T10:21:27.360 回答