代码之家 › 专栏 › 技术社区 › Carly

在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

jquery-animate animation jquery

Carly · 技术社区 · 1 年前

我是一个jQuery/Javascript新手,我正在为点击切换动画的最后一部分而挣扎。

我想让div在页面加载时自动滑入,然后可以点击一个按钮在屏幕上和屏幕下滑动。我已经设法让它在页面加载时滑入,第一次点击按钮就把它滑回屏幕,但我很难找到如何来回切换点击。第二次点击应该与页面加载时自动滑入时的外观相匹配。

我尝试过的一些变体将按钮/选项卡完全滑出视图,或者根本不起作用。

这是我的 fiddle 带有代码。

提前谢谢。

HTML格式:

 <div class="slide-out">
      <div class="slide-out-tab">
        <div>
          <p>QUIZ NIGHT</p>
        </div>
      </div>
      <div class="slide-out-content">
        <div class="slide-title"> 
          <h3>QUIZ NIGHT<br>Â£100 prize pot <br>Tuesdays <br>7pm - 9pm</h3>
          <a href="#">Book Now</a>
        </div>
      </div>
    </div>

jQuery(我尝试过的一些变体已被注释掉):

    $(window).on("load", function() {
       $(".slide-out").animate({ "right": "0px" }, "slow" );
       $(".slide-out-tab").click(
    function () { 
      $(".slide-out").animate({ "right": "-=300px" }, "slow" );
    }); 
    });


// $(window).on("load", function() {
//    $(".slide-out").animate({ "right": "0px" }, "slow" );
//    $(".slide-out-tab").click(
//     function(){
//   $(".slide-out").animate({ "right": "-=300px" }, "slow" );
// },
// function () { 
// $(".slide-out").animate({"right": "0px" }, "slow");
// });
// });

 

//     const $slideOut = $('.slide-out')
// $slideOut.find('.slide-out-tab').on('click', () => {
//   $slideOut.toggleClass('is-active')
// })


// $(document).ready(function() {
//   $(".slide-out-tab").click(function(){
//     $(".slide-out").toggleClass("is-active");
// });
// });

CSS格式:

.slide-out {
  background-color: #000;
  color:#fff;
  position: fixed;
  width: 300px;
  top: 90%;
  transform: translateY(-90%);
  right: -300px;
  min-height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5000;
}

.slide-out-tab {
  background-color: #E84E1C;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  height: 100%;
  left: -40px;
  position: absolute;
  width: 40px;
}

.slide-out-tab div {
  text-align: center;
  position: relative;
  right: 75px;
  top: 90px;
  color: #fff;
  padding: 1px 5px;
  width: 180px;
  transform: rotate(270deg);
  writing-mode: lr-tb;
}

.slide-out-content {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* .slide-out.is-active {
  right: -300px;
} */

1 回复 | 直到 1 年前

Maik Thiele 1 年前

您必须保存滑块的当前状态,并在onclick事件中相应地执行函数。

Here is your edited fiddle

我在javascript中所做的具体更改

$(window).on("load", function() {
   $(".slide-out").animate({ "right": "0px" }, "slow" );
   let slideOutVisible = true;
   
   $(".slide-out-tab").click(() => { 
    if (slideOutVisible) {
        $(".slide-out").animate({ "right": "-=300px" }, "slow" );
    } else {
        $(".slide-out").animate({ "right": "0px" }, "slow" );
    }
    slideOutVisible = !slideOutVisible;
  }); 
});

我定义了一个存储状态的变量slideOutVisible。如果用户现在单击滑块,则滑块将根据状态进行扩展或缩回。然后状态被否定。意味着它变成了自己的反面。因此,如果slideOutVisible=true,它将被设置为“not slideOutVisible”,在这种情况下为false。