单击按钮时在jquery中转换

Question

所以我尝试在单击按钮时进行转换。它应该在主 div 旁边慢慢弹出，但问题是当它再次单击按钮后再次淡入时，它不会延迟淡入。它只会毫不拖延地回来。

我用不透明度尝试了它，但它也没有用，我也测试了一些东西，但可以解决。

为不干净的代码道歉。不久前开始编码并测试了一些东西。 谢谢每一个回复。这也是我在这里的第一个问题，如果我犯了一些错误，请见谅。

这是我尝试做的代码sn-p。

如果 coden-ps 还不够，这里是 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");

});

Answer 1

我把它变得更简单了，但我希望你能理解它。

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');
  }
});