Downward animation



  • There's a code.

    $('.news-block_main').hover(
      function() {
        $('.news-block-hover_main').animate({
          height: "toggle"
        }, 200)('display', 'block');
      },
      function() {
        $('.news-block-hover_main').animate({
          height: "toggle"
        }, 200)('display', 'none');
      }
    );
    .anews {
      position: absolute;
      top: 0;
      left: 0;
      width: 33.33%;
      height: 33.33%;
    }
    .news-block {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
    }
    .news-block.news-block_main {
      width: 200%;
      height: 200%;
      border-top: 4px solid #0e0f16;
      top: 0;
      left: 0;
    }
    .news-block-info {
      position: absolute;
      top: 92%;
      left: 0;
      width: 100%;
      padding: 2px 21px 9px;
      color: #fff4e7;
      font-size: .95em;
      line-height: 1.2em;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div id="actuallynews" class="anews">
      <div class="news-block news-block_main " style="background-image: url(http://i.imgur.com/h4i1dwG.jpg);">
        <div class="news-block-hover_main" style="display:none;">
          <img src="http://i.imgur.com/QlPUjPg.png">
        </div>
      </div>
    </div>

    https://jsfiddle.net/5zpj6oLf/2/

    The animation goes on top-down, so it's up to the bottom. How do you do that?



  • I understand enough. news-block-hover_main Apply to the lower left of the block and everything.

    .news-block-hover_main {
        display: none;
        position: absolute;
        bottom: 0;
        left: 0;
        height : 100%;
    }
    

    In this case, I used 0,0, but according to css It'll be a little bit with other coordinates.

    Well, it looks like that to zero. But the idea, I think, is clear. Make a point of foot down the left.

    $('.news-block_main').hover(
      function() {
        $('.news-block-hover_main').animate({
          height: "toggle"
        }, 200)('display', 'block');
      },
      function() {
        $('.news-block-hover_main').animate({
          height: "toggle"
        }, 200)('display', 'none');
      }
    );
    .anews {
      position: absolute;
      top: 0;
      left: 0;
      width: 33.33%;
      height: 33.33%;
    }
    .news-block {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
    }
    .news-block.news-block_main {
      width: 200%;
      height: 200%;
      border-top: 4px solid #0e0f16;
      top: 0;
      left: 0;
    }
    .news-block-info {
      position: absolute;
      top: 92%;
      left: 0;
      width: 100%;
      padding: 2px 21px 9px;
      color: #fff4e7;
      font-size: .95em;
      line-height: 1.2em;
    }
    .news-block-hover_main {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      height : 100%;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div id="actuallynews" class="anews">
      <div class="news-block news-block_main " style="background-image: url(http://i.imgur.com/h4i1dwG.jpg);">
        <div class="news-block-hover_main">
          <img src="http://i.imgur.com/QlPUjPg.png">
        </div>
      </div>
    </div>

    https://jsfiddle.net/j3ey11dw/




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2