jquery - 使用 jQuery 的 slideToggle 方法时导致闪烁的原因是什么？

Question

我无法弄清楚为什么在打开和关闭此菜单时 slideToggle 会导致如此惊人的闪光：http: //jsfiddle.net/joshnh/xr3e5/

注意：我只在 Chrome 和 Safari 中注意到这一点，所以我假设这是一个 webkit 问题。

<!-- HTML -->

<nav class="mainNav">
    <ul>
        <li><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);">About Us</a></li>
        <li><a href="javascript:void(0);">Teachers</a></li>
        <li><a href="javascript:void(0);">Students</a></li>
        <li><a href="javascript:void(0);">Activities</a></li>
        <li><a href="javascript:void(0);">Media</a></li>
        <li><a href="javascript:void(0);">Venue Hire</a></li>
        <li><a href="javascript:void(0);">Contact Us</a></li>
    </ul>
</nav>

/* CSS */

.mainNav {
    background-color: #5978cf;
    color: #fff;
    cursor: pointer;
}
.mainNav:before {
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    border-bottom: 1px solid hsla(0,0%,0%,.25);
    content: '≡ Menu';
    display: block;
    font: bold 1em/3 sans-serif;
    padding-left: 1em;
    text-shadow: 0 1px 1px hsla(0,0%,0%,.1);
}
.mainNav ul {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    box-shadow: inset 0 .1em .25em hsla(0,0%,0%,.1);
    display: none;
    left: 0;
    text-align: left;
    top: 3em;
    -webkit-transition: .1s;
}
.mainNav a {
    color: #fff;
    border-bottom: 1px solid hsla(0,0%,0%,.1);
    border-top: 1px solid hsla(0,0%,100%,.1);
    display: block;
    font: 1em/3 sans-serif;
    padding: 0 1em;
    text-decoration: none;
    text-shadow: 0 1px 0 hsla(0,0%,0%,.1);
}
.mainNav li:first-child a {
    border-top: none;
}
.mainNav a:hover,
.mainNav a:focus {
    background-color: hsla(0,0%,100%,.1);
}

// jQuery

var $mainNav = $('.mainNav'),
    $mainNavA = $mainNav.find('a');

$mainNav.on('click', function() {
    $mainNav.children('ul').slideToggle('linear');
});

$mainNavA.on('click', function(e) {
    e.stopPropagation();
});

Answer 1

这似乎是您的 css 属性（ul 中的 -webkit-transition）的问题。看看http://jsfiddle.net/davidbuzatto/xr3e5/13/

.mainNav ul {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    box-shadow: inset 0 .1em .25em hsla(0,0%,0%,.1),
                inset 0 -.1em .25em hsla(0,0%,0%,.1);
    display: none;
    left: 0;
    text-align: left;
    top: 3em;
    /*-webkit-transition: .1s;*/
}