Question

我创建了一个动画，使用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。

任何想法都会非常感激！

Answer 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请求更好。

Answer 2

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

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

Answer 3

我刚刚在这里更新你的jquery代码。请查看此fiddle

另外，在这里添加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')

jQuery Animation可以工作，但不适用于Safari

3 个答案: