2

我创建了一个动画，使用 jQuery 模拟开门。它适用于 Firefox 24、Chrome 28 甚至 IE 8。但是，它不适用于 Safari - 门打开但“关闭”的门重新出现在原始门右侧的动画末尾。

jQuery：

$('.obrtlcsdoor span a').mouseover(function(){
    $(this).closest('div').children('.obrtlcsdoorimage')
        .stop()
        .animate({
                marginLeft: 55,
                width: 0
            }, 500)
        .height();
});
$('.obrtlcsdoor span a').mouseout(function(){
    $(this).closest('div').children('.obrtlcsdoorimage')
        .stop()
        .animate({
                marginLeft: 0,
                width: 55
            }, 500)
        .height();
});

HTML：

<div class="obrtlcsdoor">
    <div class="obrtlcsdoorimage">
        <img src="http://example.com/images/e-door.png" />
    </div>
    <span>
        <a href="http://example.com/">Contact Us</a>
    </span>
</div>

CSS：

.obrtlcsdoor {
    z-index: 10;
    float: left;
    display: block;
    margin: 10px;
    height: 100px;
    width: 263px;
    background: #ff6900 url('http://example.com/images/e-door-open.png') no-repeat top left;
    overflow: hidden;
    line-height: 100px;
}
.obrtlcsdoor span {
    width: 188px;
    padding: 0 10px 6px;
    font: bold 21px/24px 'Cabin', Arial, sans-serif;
    line-height: 24px;
    display: inline-block;
    vertical-align: middle; 
    text-align: center;
}
.obrtlcsdoor span a {
    display: block;
}
.obrtlcsdoor span a:link,
.obrtlcsdoor span a:visited {
    text-decoration: none;
    color: #fff;
}

.obrtlcsdoor span a:hover {
    text-decoration: none;
    color: #ffba8a;
}
.obrtlcsdoorimage {
    display: block;
    float: left;
    height: 100px;
    width: 55px;
}
.obrtlcsdoorimage img {
    width: 100%;
    height: 100%;
}

我已将其设置为jsfiddle。

任何想法将不胜感激！

4

3 回答 3

1

我的建议是只为门宽度设置动画，并将其向右对齐。

我认为动画故障来自 jQuery 同时改变边距和宽度的事实。

你轻微修改的小提琴：http: //jsfiddle.net/F4YkJ/26/

最终的 HTML：

<div class="obrtlcsdoor">
    <div class="obrtlcsdoorimage">
        <img src="http://outerbridge.co/nonwpitems/e-door.png" />
    </div>
    <a href="http://outerbridge.co/">Contact Us</a>
</div>

CSS：

.obrtlcsdoor {
    z-index: 10;
    display: block;
    margin: 10px;
    height: 100px;
    width: 283px;
    background: #ff6900;
    overflow: hidden;
}
.obrtlcsdoorimage {
    display: inline-block;
    text-align: right;
    float: left;
    height: 100px;
    width: 55px;
    background-color: black;
}

.obrtlcsdoor a {
    display: inline-block;
    margin-left: 55px;
    font: bold 21px/24px 'Cabin', Arial, sans-serif;
    color: #fff;
    text-align: center;
    height: 100px;
    line-height: 100px;
}
.obrtlcsdoor a:link,
.obrtlcsdoor a:visited {
    text-decoration: none;
    color: #fff;
}
.obrtlcsdoor a:hover {
    text-decoration: none;
    color: #ffba8a;
}

JS：

$('.obrtlcsdoor a').mouseover(function(){
    $(this).parent().find('img')
        .stop()
        .animate({
                width: 0,
                height: '100px'
            }, 500);
});
$('.obrtlcsdoor a').mouseout(function(){
    $(this).parent().find('img')
        .stop()
        .animate({
                width: 55,
                height: '100px'
            }, 500);
});

编辑 ：

我还建议你看看这个纯 CSS3 版本：http: //jsfiddle.net/F4YkJ/30/

它完全没有 javascript 也能达到相同的结果，但您可能希望支持不支持 css3 的浏览器。

注意：门的背景图片被删除了，因为我认为门图片背景本身是纯黑色的，这不是...建议你找到门图片背景颜色的html代码，这比再发一个http请求好.

于 2013-10-21T16:12:40.503 回答
0

不完全确定为什么它在 Safari 中这样做，但将目标宽度设置为 1 似乎可以解决它，如果 1px 宽的门困扰你，你可以在动画完成后隐藏它吗？

顺便说一句，联系页面的触感很好。

于 2013-10-16T12:20:19.957 回答
0

我刚刚在这里更新了你的 jquery 代码。请检查这个小提琴

另外，在此处添加 jquery 代码。

$('.obrtlcsdoor span a').mouseover(function(){
   $(this).closest('div').find('img')
    .stop()
    .animate({
            marginLeft: 55,
            width: 0
        }, 500)
    .height();
});
$('.obrtlcsdoor span a').mouseout(function(){
   $(this).closest('div').find('img')
    .stop()
    .animate({
            marginLeft: 0,
            width: 55
        }, 500)
    .height();
});

我刚刚替换.find('img')为.children('.obrtlcsdoorimage')

于 2013-10-25T07:33:27.747 回答