单击按钮时 jquery 中的过渡

Question

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

我用 opacity 试了一下，也没有用，我也测试了一些东西，但可以弄清楚。

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

这是我尝试做的代码片段。

如果代码片段不够，这里是 link 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');
  }
});

单击按钮时 jquery 中的过渡

Transition in jquery when clicking on button

css

jquery

transition

fadein