jQuery動畫作品，但不是在Safari

我創建了一個動畫，模擬使用jQuery的開門。它適用於Firefox 24，Chrome 28甚至IE 8，但它在Safari上不起作用 - 門打開，但在原始門右側的動畫結尾處重新出現「關閉」門。jQuery動畫作品，但不是在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。

任何想法將不勝感激！

來源

2013-10-16 user114671

我的建議是隻動畫門寬，並將其對齊到右側。

我認爲動畫故障來自於事實，而不是jQuery同時更改邊距和寬度。

你slighlty修改小提琴：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-21 16:12:40 Pandaiolo

非常感謝Pandaiolo，太棒了。 CSS需要一些調整來使它保持文本的垂直對齊等，但是我可以看到我現在需要做的事情。我想，只是一個Safari的怪癖。 – user114671

不完全確定它爲什麼在Safari中這樣做，但將目標寬度設置爲1似乎可以修復它，如果1px寬的門打擾您，您可以在動畫完成後將其隱藏起來？

順便說一句好的聯繫方式。

來源

2013-10-16 12:20:19 Caedmon

謝謝，但我不想1px的寬門，我希望它完全打開。 – user114671

我剛剛在這裏更新你的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')

來源

2013-10-25 07:33:27

jQuery動畫作品，但不是在Safari

回答

相關問題