After creating an animation to simulate an opening door using jQuery, I discovered that it works perfectly on Firefox 24, Chrome 28, and IE 8. However, Safari presents a problem - the door opens but then the "closed" door reappears at the end of the animation to the right of the original door.
Here is the jQuery code:
$('.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();
});
And here is the HTML code:
<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>
Lastly, the CSS used for styling:
.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%;
}
If you want to see a live example, check out this JSFiddle link.
I would greatly appreciate any suggestions or ideas to fix the issue with Safari!