CODEWITHSUNDEEP
jquerytoggle
Gustav Hederström
Gustav Hederström

Reputation: 49

Jquery toggle() annoying flickering in Safari

Im having some problems with a simple toggle in Safari. A really annoying flickering at the end of the hide animation. Anyone?

CSS

#menu {
    position:absolute;
    left: 30px;
    top: 30px;
    padding: 30px;
    background: #FF0;
}

#content {
    width: 400px;
    display: none;
}

Javascript

$(document).ready(function() {
    $('#menu').click(function() {
        $('#content').toggle(700);
    });
});

Demos

http://jsfiddle.net/DBeg9/

http://www.clapclap.se/test/toggle.html

Upvotes: 2

Views: 2184

Answers (2)

mVChr
mVChr

Reputation: 50177

There seems to be an issue with setting width/height to 0, which must be what happens at the end of the toggle animation just before setting display: none. The only way I figured out how to fix this is by doing the animation the long way:

var $c = $('#content'),
    cw, ch;

$c.show();
cw = $c.width();
ch = $c.height();
$c.hide();

$('#menu').toggle(function() {
    $c.css({
        'width': 1,
        'height': 1,
        'opacity': 0
    }).show().animate({
        'width': cw,
        'height': ch,
        'opacity': 1
    }, 700);
}, function() {
    $c.animate({
        'width': 1,
        'height': 1,
        'opacity': 0
    }, 700, function() {
        $c.hide();
    });
});

See demo

Upvotes: 0

Niloct
Niloct

Reputation: 9995

Try changing the toggle line to:

$('#content').toggle(700,'linear');

Upvotes: 5

Related Questions