Question

问题

我有一个侧面导航，我已经放在一起，到目前为止它工作正常。我试图在面板上的一个“关闭”按钮淡入淡出，以便用户可以轻松关闭切换面板。

我有一些东西可以做到这一点，但如果你从一侧导航项目点击到另一侧导航项目，你会发现它变得混乱而且不同步。

的jsfiddle

http://jsfiddle.net/visualdecree/4A23Z/37/

的jQuery

$(".sn a").on('click',function(){ // Sidenav panel script

    var panID = $("#" + $(this).data('panel') );

    $("div[id*='sn-pan-']")
    .stop()
    .hide({slide:'toggle'}, 400);

    $(panID)
    .css({'left' : '139px','overflow':'visible'})
    .stop()
    .animate({width:'toggle'}, 400)

        $(".control-view").stop().fadeOut("slow");  // Fadein menu close button
    $(".control-view").not(":visible").stop().delay(400).fadeTo("fast", 0.33);   

});

$('.sn').click(function(e) {
    $('ul.sidenav li').not(this).removeClass('active'); // Active class removal / add
    $(this).stop(true, true).toggleClass("active");    
});

$(".control-view").hover( // Hover effect for menu close button
    function () {
    $(".control-view").stop().hide().fadeTo("fast", 1); // Hover in
   }, 
    function () {
    $(".control-view").fadeTo("normal",0.33); // Fade back to previous set opacity
});

$('.control-view').click(function(e) {
        $("div[id*='sn-pan-']")
        .stop()
        .hide({slide:'toggle'}, 400);

        $('ul.sidenav li').not(this).removeClass('active');

        $(".control-view").stop().fadeOut("fast");
});

我感谢我的代码可能很乱，我正在学习任何你可以帮助的东西，我会欣赏并带走我。

Answer 1

尝试更改行

$(".control-view").stop().fadeOut("slow");  // Fadein menu close button

要

$(".control-view").hide();  // Fadein menu close button

基本上是选择器

$(".control-view").stop().fadeOut("slow");

正在淡出所有锚点（＆lt; a class =“control-view”＆gt;＆lt; / a＆gt;），然后您立即尝试使用$（“。control-view”）查找可见的锚点。不是（“：可见”）....但实际上还没有隐藏任何锚点。

Jquery fadeTo with toggle nav

1 个答案: