CODEWITHSUNDEEP
javascriptjqueryhtmlcsssafari
user114671
user114671

Reputation: 532

jQuery Animation works but not on Safari

I have created an animation, simulating an opening door using jQuery. It works on Firefox 24, Chrome 28, and even IE 8. However, it does not work on Safari - the door open but then the "closed" door reappears at the end of the animation to the right of the original door.

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%;
}

I've set it up as a jsfiddle.

Any ideas would be much appreciated!

Upvotes: 2

Views: 631

Answers (3)

Rahul J. Rane
Rahul J. Rane

Reputation: 246

I have just update your jquery code here. Please check this fiddle

Also, adding jquery code here.

$('.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();
});

I have just replaced .find('img') with .children('.obrtlcsdoorimage')

Upvotes: 0

Pandaiolo
Pandaiolo

Reputation: 11586

My suggestion is to only animate door width, and align it to the right.

I think the animation glitch come from the fact than jQuery is changing the margin and the width at the same time.

Your slighlty modified fiddle : http://jsfiddle.net/F4YkJ/26/

Final 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);
});

Edit :

I also suggest you have a look at this pure CSS3 version : http://jsfiddle.net/F4YkJ/30/

It achieve the same result with no javascript at all, but you may want to support browser that do not support css3.

Note : The background image of the door was removed because I thought the door image background itself was pure black, which is not... I suggest you find the html code of the door image background color, which is better than make another http request.

Upvotes: 1

Caedmon
Caedmon

Reputation: 687

Not entirely sure why it does that in Safari, but setting the target width to 1 seems to fix it, if the 1px wide door is bothering you you could alway hide it after the animation is complete?

Nice touch for a contact page by the way.

Upvotes: 0

Related Questions