JS函数用于平滑页面加载 - 订单问题

Question

很难解释所以请耐心等待。

我有一个打开时带有标题和段落标记的页面，然后我会有一些图像。

我的图片是我的投资组合，当点击时，我将使用AJAX来动态填充页面。

当用户点击图片上的标题时，我希望发生以下操作......

• 窗口滚动到该图像的顶部
• 边框全部删除（参见JSFiddle链接）
• 使用AJAX我可以在新图像下填充页面

我遇到的问题是我需要删除图片上方的内容，以便当窗口滚动到所选的投资组合部分并且内容被删除后，它就会变得不稳定和紧张。

这是一个链接...

https://jsfiddle.net/oterdwn1/

这是我现在的JS ......

JS

$('a.video').on('click', function(e) {

  'use strict';
  e.preventDefault();
  if ($('.hero-pane').css('overflow') == 'hidden') {
    return false;
  }

  var dstn = $(this).attr('href');
  var className = $(this).data('class');


  var tgt = $(this);


  $('.studies a').each(function() {
    $('.hero-pane').css({
      opacity: 0
    });
    if ($(this).data("class") !== className) {
      $(this).hide();
    }
  })
  $('.hero-pane').css('overflow', 'hidden');
  $('.hero-pane').css('min-height', '0px');
  $('.hero-pane').css('max-height', '1000px');


  $('html,body').animate({
      scrollTop: (tgt).offset().top
    },
    800,
    function() {

      $(tgt).find($('.border-left, .border-right')).css('width', 0);
      $(tgt).find($('.border-top, .border-bottom')).css('height', 0);

      $('.hero-pane').delay(200).animate({
        'max-height': '0px'
      }, 100);
      $('.hero-pane').delay(200).animate({
        'padding-top': '0px'
      }, 100);
      $('.hero-pane').delay(200).animate({
        'padding-bottom': '0px'
      }, 100);
      $('.studies').delay(1000).animate({
        'margin-top': '-100px'
      }, 400);
      $('html,body').delay(1000).animate({
        scrollTop: 0
      }, 400, function() {
        //$('html, body').css({
        //   overflow: 'visible',
        //   height: 'auto'
        //});
      });


    });


  $('#' + className + '-study-title').delay(1500).fadeOut(1000, function() {
    getPageHTML(dstn, className);
  });


});

Answer 1

您似乎无法 动画 max-height 样式。尝试使用＆＃34; slideUp＆＃34;。

＆＃13;

＆＃13;

$('a.video').on('click', function(e) {

  'use strict';
  e.preventDefault();
  if ($('.hero-pane').css('overflow') == 'hidden') {
    return false;
  }

  var dstn = $(this).attr('href');
  var className = $(this).data('class');


  var tgt = $(this);


  $('.studies a').each(function() {
    $('.hero-pane').css({
      opacity: 0
    });
    if ($(this).data("class") !== className) {
      $(this).hide();
    }
  })
  $('.hero-pane').css('overflow', 'hidden');
  $('.hero-pane').css('min-height', '0px');
  $('.hero-pane').css('max-height', '1000px');


  $('html,body').animate({
      scrollTop: (tgt).offset().top
    },
    800,
    function() {
      $(tgt).find($('.border-left, .border-right')).css('width', 0);
      $(tgt).find($('.border-top, .border-bottom')).css('height', 0);
      $('.hero-pane').slideUp(1000)
      $('.hero-pane').delay(200).animate({
      //  'max-height': '0px',
        'padding-top': '0px',
        'padding-bottom': '0px'
      }, 100);
      return;
      $('.studies').delay(1000).animate({
        'margin-top': '-100px'
      }, 400);
      $('html,body').delay(1000).animate({
        scrollTop: 0
      }, 400, function() {});

    });

  $('#' + className + '-study-title').delay(1500).fadeOut(1000, function() {
    getPageHTML(dstn, className);
  });


});

＆＃13;

.studies {
  position: relative;
}

.video {
  height: 100vh;
  min-height: 650px;
  border: 0;
  display: block;
  height: auto;
  background: #fff;
  padding-bottom: 0;
  border-color: white;
  overflow: hidden;
  border-style: solid;
  position: relative;
}

.video img {
  border-right: 1px solid #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.border-top,
.border-bottom,
.border-top:after,
.border-bottom:after,
.border-left,
.border-right,
.border-left:after,
.border-right:after {
  position: absolute;
  z-index: 9;
  background-color: #fff;
}

.border-bottom {
  bottom: 0;
  top: auto;
}

.border-top,
.border-bottom {
  width: 100%;
  height: 65px;
  transition: all 1s;
  top: 0;
}

.border-left,
.border-right {
  height: 100%;
  left: 0;
  width: 65px;
  transition: all 1s;
  bottom: 0;
}

.border-right {
  right: 0;
  left: auto;
}

.border-bottom {
  bottom: 0;
  top: auto;
}

.brand-title {
  position: absolute;
  width: auto;
  bottom: 7.5%;
  left: 7.5%;
  padding: 15px;
  text-align: left;
  z-index: 1000000;
}

html {
  height: 100%;
}

body {
  height: 100%;
  overflow: auto;
}

body::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrapper">
  <div class="hero-pane">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12 col-md-8">
          <h1>Title</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        </div>
      </div>
    </div>

  </div>
  <div class="studies">

    <a href="#" data-class="brand1" class="video brand1" style="z-index: 2">
      <div class="border-top"></div>
      <div class="border-bottom"></div>
      <div class="border-left"></div>
      <div class="border-right"></div>
      <div id="brand-study-title" class="brand-title">
        <div class="faux-link">
          <h4>Title</h4>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing eli.</p>
      </div>
      <img src="http://lorempixel.com/400/200/sports/">
    </a>

    <a href="#" data-class="brand2" class="video brand2" style="z-index: 2">
      <div class="border-top"></div>
      <div class="border-bottom"></div>
      <div class="border-left"></div>
      <div class="border-right"></div>
      <div id="brand-2-study-title" class="brand-title">
        <div class="faux-link">
          <h4>Title 2</h4>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing eli.</p>
      </div>
      <img src="http://lorempixel.com/400/200/sports/">
    </a>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;