javascript - 如何确保使用css和js的动态文本可以缩放和向上滑动？

Question

请找到这个CodePen:http://codepen.io/hellouniverse/pen/rrVddV

我有一个使用 Ajax 调用获得的示例图像和文本。我无法显示 Ajax 调用，因此在 CodePen 上我包含了一个模拟，它试图尽可能地相似。文本动态添加到图像之后。

悬停时，我想确保图像有缩放效果，并且文本也能很好地向上滑动。 现在，缩放类的作品，虽然文本没有向上滑动，但基本上跳到顶部!!!

无论我喝了多少咖啡或我对 IntelliJ 发誓多少次，我都无法让它工作。我一定是在某个地方犯了一个非常小的错误，非常感谢任何帮助。

基本上，我想悬停时执行以下操作:

• 文本在悬停时向上滑动，在鼠标移开时向下滑动
• 图像在悬停时具有缩放效果(比例为 1.1)并在鼠标移开时缩小
• 此外，div (block__Content) 的宽度和高度根本不应增加(但由于比例目前正在扩大)。

 var $title = "MY Title";
 var $summary = "My Summary";
 var $ctaText = "A CTA TEXT";
 // Here is the mimic I described;
 // The data is actually obtained using an Ajax call (which I cannot replicate here):
 var $contentHover = "<div class='content-added contenthover'></div>";

 $('.myImage').after($contentHover); // Add the div that will be targeted for the hover

 var $contentHoverHeader = "<h2 class='contenthover__header'>" + $title + '</h2>';
 var $contentHoverContent = "<p class='contenthover__content'>" + $summary + '</p>';
 var $contentHoverLink = "<a class='contenthover__link' href='#'>" + $ctaText + '</a>';

 $('.contenthover').append($contentHoverHeader, $contentHoverContent, $contentHoverLink);
 $('.contenthover').hover(function() {

   $('.contenthover').css({
     display: 'inline-block',
     width: '100%',
     height: '278px',
     position: 'absolute',
     bottom: '0',
     transition: 'bottom 500ms ease-out'
   })
 });

.block__content {
  max-width: 1280;
  margin: 0 auto;
  display: inline-block;
}
.block__content {
  width: auto;
  height: 278px;
}
.contenthover {
  display: none;
}
.bgtile {
  background-repeat: no-repeat;
  &: hover, &: focus {
    cursor: pointer;
    height: 278px;
    transform: scale(1.1);
    transition: all 500ms ease-in-out;
  }
}
.node__content {
  span {
    display: none;
    // NO to the text } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block__content">
  <div class="content-tile">
    <article role="article" class="node sb-article bgtile" style="background-image: url('http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');">
      <div class="node__content">
        <span>DO NOT DISPLAY ME</span>
        <div class="myImage">
          <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="A large image" typeof="Image">
        </div>
      </div>
    </article>
  </div>
</div>

Answer 1

对您的 CSS 和 jQuery 稍加改动，您就可以轻松实现这一目标。

这是更新的 Codepen

更新的 SCSS:

.block__content {
    max-width: 1280px;
    margin: 0 auto;
    display: inline-block;
    position: relative;
}

.block__content {
    width: auto;
    height: 278px;
    overflow: hidden;
}

.contenthover {
    bottom: -278px;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    color: #ffffff;
    transition: all 500ms ease-in-out;
}

.bgtile {
    background-repeat: no-repeat;
    cursor: pointer;
    height: 278px;
    img {
        transform: scale(1);
        transition: all 500ms ease-in-out;
    }
    &:hover img,
    &:focus img{
        transform: scale(1.1);
    }
}

更新的 jQuery:

$('.bgtile').mouseover(function() {
    $('.contenthover').css({
        bottom: '0'
    })
});

$('.bgtile').mouseout(function() {
    $('.contenthover').css({
        bottom: '-100%'
    })
});