除非调整屏幕大小，否则悬停上的滚动功能将不起作用

Question

我想念1％来完成脚本，我只是不知道该怎么做：D

当您将鼠标悬停在左侧的目标上时，可以看到图像会滚动。但是单击新图像后就不会了。然后，我必须调整窗口大小以使其再次运行。如何解决？以下是我的代码，但一个有效的示例为here's a CodePen

(function($) {
  // virables
  var layoutContainer = '.container';
  var layoutTarget = '#target';
  var layoutTargetIMG = '#target img';
  var layoutIMG = '.container .gallery .item img';
  var layoutIMGFirst = '.container .gallery .item:first-child img';


  // Add first image to target 
  $(layoutIMGFirst).clone().appendTo(layoutTarget);

  // Add image to target when click on gallery image
  $(layoutIMG).click(function() {
    $(this).closest(layoutContainer).find(layoutTarget).empty();
    $(this).clone().appendTo(
      $(this).closest(layoutContainer).find(layoutTarget)
    );
  });



  // Image scroll on hover
  // This won't work after clicking on an image unless resizing the browser
  $(window).resize(function() {
    // If i remove this it won't work on the start image.
    // Any other solution?
    setTimeout(function() {

      $('#target img').each(function() {
        var itemHeight = $('#target').outerHeight();
        var imgHeight = $(this).outerHeight();
        // Work out what percentage the image is of the item and remove 100% from that
        var topHeight = (imgHeight / itemHeight) * 100 - 100;
        //Make the animation speed proptional to that ratio
        var animationSpeed = (imgHeight / itemHeight) / 1; //change 2 to tweak the speed

        $(this).css({
          transition: 'all ease ' + animationSpeed + 's'
        });

        $(this).mouseleave(function() {
          $(this).css({
            top: '0'
          });
        })

        // The 'top' property  of the image needs 
        // to be set as as a percentage of the parent
        $(this).mouseenter(function(e) {
          $(this).css({
            top: '-' + topHeight + '%',

          });
        })
      });
    }, 200);
  });


  $(document).ready(function() {
    setTimeout(function() { // Add delay after resize so function will load
      $(window).triggerHandler('resize');
    }, 200);
  });
})(jQuery);

.container {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  margin-left: -40px;
  max-width: 1000px;
  background: lightblue;
  padding: 20px;
  .column {
    flex: 1;
    min-width: 30%;
    margin-left: 40px;
    .target {
      height: 400px;
      background: pink;
      position: relative;
      overflow: hidden;
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }
    }
    .cta {
      display: flex;
      a {
        background: lightgreen;
        width: 50%;
        padding: 16px 8px;
        ;
        text-align: center;
        justify-content: center;
        text-decoration: none;
        &:last-child {
          background: orange;
        }
      }
    }
    .gallery {
      display: flex;
      flex-flow: row wrap;
      margin-left: -4px;
      .item {
        flex: 1;
        margin-left: 4px;
        position: relative;
        overflow: hidden;
        &::before {
          content: '';
          padding-top: 80%;
          display: block;
        }
        img {
          position: absolute;
          min-width: 100%;
          min-height: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          cursor: pointer;
        }
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="column">
    <div id="target" class="target"></div>
    <div class="cta">
      <a href="#" class="demo">SE DEMO</a>
      <a href="#" class="buy">KØB LAYOUT</a>
    </div>
  </div>
  <div class="column">
    <div class="gallery">
      <div class="item">
        <img src="https://picsum.photos/600/1200" alt="">
      </div>
      <div class="item">
        <img src="https://picsum.photos/500/1600" alt="">
      </div>
      <div class="item">
        <img src="https://picsum.photos/400/2000" alt="">
      </div>
    </div>
  </div>
</div>

Answer 1

只需更改此

$(layoutIMG).click(function() {
      $(this).closest(layoutContainer).find(layoutTarget).empty();
      $(this).clone().appendTo(
        $(this).closest(layoutContainer).find(layoutTarget)
      );
    }); 

到

$(layoutIMG).click(function() {
      $(this).closest(layoutContainer).find(layoutTarget).empty();
      $(this).clone().appendTo(
        $(this).closest(layoutContainer).find(layoutTarget)
      );
      $(window).triggerHandler('resize'); // added this line
    });