Переход в jquery при нажатии на кнопку - PullRequest
Новая
       29

Переход в jquery при нажатии на кнопку

0 голосов
/ 29 января 2020

Поэтому я попытался получить переход при нажатии на кнопку. Он должен всплывать медленно рядом с основным элементом div, но проблема в том, что когда он снова исчезает после повторного нажатия кнопки, он не исчезает с задержкой. Это только возвращение без задержки.

Я попробовал это с непрозрачностью, и это также не работало, также я проверил несколько вещей, но мог понять это.

Прошу прощения за нечистый код. Начал не долго go с кодирования и тестировал некоторые вещи. Спасибо за каждый ответ. Это также мой первый вопрос здесь, так что извините, если я допустил некоторые ошибки.

Вот фрагмент кода, что я пытался сделать.

Если кодов кода недостаточно, вот ссылка на все на Codepen: https://codepen.io/ViteZ/pen/abzrjKJ

HTML

<div id="wrapper">
        <div id="weatherLayout">
            <button id="detailsButton1" class="button">
                <img id="imgRotate" src="/icon_doppeltRunter.png">
            </button>
        </div>

        <div id="detailsLayout">
            <button id="detailsButton2" class="button">
                <img id="imgRotate2" src="/icon_doppeltRunter.png">
            </button>
            <p>dsfdsfdsf

            </p>
        </div>
    </div>

CSS

#weatherLayout {
    height: 400px;
    width: 300px;
    background-image: linear-gradient(to bottom, #82C7F2, #AE8FDD);
    float: left;
    border-radius: 8%;
}

#detailsButton1 {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    float: right;
    margin-top: 330px;

}

.button {

    background-color: #A37AD0;
    border: none;
    width: 50px;
    height: 30px;
}

#detailsButton2 {
    opacity: 1 !important;
    float: left;
    margin-top: 290px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

#detailsLayout {
    visibility: hidden;
    background-image: linear-gradient(to bottom, #B5DFEF, #C5B2E7);
    width: 0px;
    height: 320px;
    margin-left: 300px;
    margin-top: 40px;
    border-top-right-radius: 8%;
    border-bottom-right-radius: 8%;
}

JS

$("#detailsButton1").click(function () {

    $("#detailsLayout").css("transition", "width 1s");
    $("#detailsLayout").css("transition-timing-function", "ease-in");
    $("#detailsLayout").css("visibility", "visible");
    $("#detailsLayout").css("width", "250px");
    $(this).css("display", "none");
    $("#detailsButton2").css("display", "block");
});


$("#detailsButton2").click(function () {
    $("#detailsLayout").css("transition", "opacity 1s");
    $("#detailsLayout").css("transition-timing-function", "ease-out");
    $("#detailsLayout").css("width", "0px");
    $(this).css("display", "none");
    $("#detailsButton1").css("display", "block");
    $("#detailsLayout").css("visibility", "hidden");

});

1 Ответ

0 голосов
/ 29 января 2020

Я делаю это проще, но я надеюсь, вы понимаете это.

html: 

<div id="wrapper">
        <div id="weatherLayout">
            <button id="detailsButton1"class="button"><span>Button<span></button>
        </div>

        <div id="detailsLayout">
            <p>test</p>
        </div>
    </div>

css: 

#wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


#weatherLayout {
    height: 400px;
    width: 300px;
    background-image: linear-gradient(to bottom, #82C7F2, #AE8FDD);
    float: left;
    border-radius: 8%;
}

#detailsButton1 {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    float: right;
    margin-top: 330px;
}

.button {
    background-color: #A37AD0;
    border: none;
    width: 50px;
    height: 30px;
}

#detailsLayout {
    background-image: linear-gradient(to bottom, #B5DFEF, #C5B2E7);
    width: 0px;
    height: 320px;
    margin-left: 300px;
    margin-top: 40px;
    border-top-right-radius: 8%;
    border-bottom-right-radius: 8%;
    transition: width .5s ease;
}

#detailsLayout.open {
  width: 250px;
}

#detailsButton1.active {
  transform: translateX(100%);
  border-radius: 0 8% 8% 0;
}

jQuery: 

$('#detailsButton1').click(function(){
  if(!$(this).hasClass('active')) {
    $('#detailsLayout').addClass('open');
    $(this).addClass('active'); 
  } else {
    $('#detailsLayout').removeClass('open');
    $(this).removeClass('active');
  }
});
...