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;*/
}

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

1 个答案: