Question

我在Safari中进行简单切换时遇到了一些问题。在隐藏动画结束时真的很烦人的闪烁。任何人吗？

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

演示

http://jsfiddle.net/DBeg9/

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

Answer 1

尝试将切换线更改为：

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

Answer 2

将宽度/高度设置为0似乎存在问题，这必须是在设置toggle之前display: none动画结束时发生的问题。我弄清楚如何解决这个问题的唯一方法是通过漫长的方式完成动画：

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

Jquery toggle（）在Safari中烦人的闪烁

2 个答案:

See demo