Раздвижные боковые панели, исчезающие кнопки, условные высказывания

Question

Во-первых, вот тема, над которой я работаю, если это помогает. (x)

Я пытаюсь сделать боковые панели разборными. Ну, с тем, что я получил с этим jQuery, он сильно рухнет. Это стрелки, которые меня топят.

Вот код, который у меня есть; это влияет только на левую боковую панель, я решил, что могу просто скопировать это и изменить некоторые классы и идентификаторы для правильного.

$(document).ready(function(){ 
    $('#leftside').mouseenter(function(){ 
     $('#leftbutton.contained').fadeIn() 
    }); 
    if($('#leftside').is(':visible')) { 
     $('#leftside').mouseleave(function(){ 
      $('#leftbutton.contained').delay(800).fadeOut() 
     }); 
    } 
    $('#leftbutton').click(function(){ 
     $('#leftside').toggle("slide"); 
     $('#leftbutton').toggleClass("contained"); 
    }); 
}); 

Я хотел, чтобы кнопка появлялась, когда соответствующая боковая панель зависала и исчезала, когда вы ее покидали. К счастью! Но, как только боковая панель исчезает, когда она рушится, также появляется кнопка.

В классе «содержится», кстати, нет ни одного дисплея. Моя теория заключалась в том, что если бы я привязал этот класс к кнопке и переключил его, кнопка осталась бы видимой после того, как появится боковая панель. К сожалению, это не так.

Что я делаю неправильно?

(Кроме того, на горизонте: после того, как боковая панель скользит внутрь, я хочу, чтобы стрелка, пока она была видимой, скользнула из основной области и выходила на край «.house» div, в случае, если зритель хочет, чтобы боковые панели вернулись. У меня есть только малейшая идея, как это сделать, и это - оживить изменение от левого и правого атрибутов. После того, как боковая панель переключается назад, она возвращается к скрытию и раскрытию, когда мышь уходит и входит , соответственно. Если у вас есть какие-либо советы или ответ на эту неизбежную проблему, я бы тоже признал это!)

EDIT: Код, предложенный мне, по-прежнему не работает! Я попытался сделать еще одно условное, и это все еще не работает. Это нелепо.

$(document).ready(function(){ 
    if ($('#leftside').is(:visible)) { 
    $('#leftside').mouseenter(function(){ 
     $('#leftbutton.contained').fadeIn() 
    }); 
    $('#leftside').mouseleave(function(){ 
     $('#leftbutton.contained').delay(800).fadeOut() 
    }); 
    } else { $('#leftbutton').css("display:block") } 

Я знаю, что это, вероятно, очевидно, более опытный кодер, но я в тупик и немного разочарован.

Answer 1

JQuery не выполняет какую-либо логику, как во встроенных системах. Ваш if($('#leftside').is(':visible')) { Выполняется только один раз, когда документ загружен. Тогда все, что происходит после, не принимается во внимание.

Я думаю, что я понял, каково ваше намерение. Я думаю, что вместо того, чтобы сделать боковую панель полностью исчезнуть, вы можете уменьшить ее до 1-2 пикселей, так что, когда пользователь переместит свою мышь на край экрана, вы можете вызывать onhover события, чтобы показать стрелки, где вы хотите.

вар расширена = верно

$('#leftside').hover(function(){ 
    //MouseEnter 
    $('#leftbutton.contained').fadeIn() 
}, function(){ 
    //Mouse leaves 
    $('#leftbutton.contained').delay(800).fadeOut() 
} 

$('#leftbutton').click(function(){ 
    if (expanded){ 
     $('#leftside').css("width", 2) 
     // Reposition #leftButton where you want when the left menu is NOT visible 
    } else{ 
     $('#leftside').css("width", DEFAULT_VALUE) 
     // Reposition #leftButton when the left menu IS visible 
    } 
    $('#leftbutton').toggleClass("contained"); 
    expanded = !expanded 
});