Jquery: изменение отрицательного положения в зависимости от высоты элемента

У меня есть следующий Jquery, который будет скользить коробку вверх и с холста. Написано для определенной высоты IE 200px box moving off by-200px. Я хочу изменить его так, чтобы коробка могла быть любой высоты.

$(function() {
    $('#activator').click(function(){
        $('#overlay').fadeIn('fast',function(){
            $('#box').animate({'top':'160px'},500);
        });
    });
    $('#boxclose').click(function(){
        $('#box').animate({'top':'-200px'},500,function(){
            $('#overlay').fadeOut('fast');
        });
    });

});

Я хотел бы изменить его так, чтобы {‘top’: ‘- 200px’} был фактически независимо от высоты #box в то время.

1 ответ

  1. Без вашего точного HTML, это немного трудно догадаться, что ваш HTML на самом деле выглядит, поэтому я не могу проверить то, что написано здесь, но в теории это должно работать. Для более точного ответа, пожалуйста, разместите в вашем соответствующем HTML и CSS, и я обновлю свой ответ.

    Чтобы получить высоту содержимого, используется$(...).height(), доступ к высоте элемента вне содержимого осуществляется через$(...).outerHeight(), и передача значения true.outerHeight()функции возвращает высоту объекта, включая любые верхние / нижние поля.

    $(function() {
      $('#activator').click(function() {
        $('#overlay').fadeIn('fast', function() {
          $('#box').animate({
            'top': '160px'
          }, 500);
        });
      });
      $('#boxclose').click(function() {
        var box_height = -1 * $('#box').outerHeight(true);
        $('#box').animate({
          'top': box_height + 'px'
        }, 500, function() {
          $('#overlay').fadeOut('fast');
        });
      });
    
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    Более Правильный Путь

    Учитывая, что анимации в Javascript немного устарели, и многие (если не все) разработчики рекомендовали бы вам использовать CSS для достижения как можно большего, когда это возможно, вот что я бы сделал, чтобы достичь вашей цели.

    $(function() {
    
      $('#activator').on('click', function(e) {
        e.preventDefault();
        //Make sure the link doesn't do that thing we don't want it to do.
        $('#box').toggleClass('visible');
      })
    })
    #box {
      position: absolute;
      /* We want to have an absolutely positioned element, I assume? */
      transition: all 400ms linear;
      /*Tell the browser that ALL changes to animatable CSS properties will happen over 400 miliseconds, and occur in a linear way. You could change this to ease-in or ease-out, or make your own bezier curve*/
      top: -100%;
      /*Have the element start off entirely off screen.*/
    }
    #box.visible,
    #box:target {
      /* If we have the visible class to the element, OR the element is the current target (i.e. your URL looks like 
      website.com/page.html#box, the top will be 160px down. Change this to whatever you'd like.*/
      top: 160px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="box">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, consectetur.</p>
      <p>Sequi alias debitis quos provident tenetur quis non odio. Voluptatum.</p>
      <p>Illum reprehenderit ducimus delectus. Totam maxime harum, ratione eligendi aut.</p>
      <p>Mollitia iusto enim eveniet corporis obcaecati. Veritatis quia velit perspiciatis.</p>
      <p>Eveniet repudiandae sed ipsa eos, tempora quidem sit ipsam non.</p>
    </div>
    <div class="main">
      <h3>Hello!</h3>
      <a href="#box" id="activator">Activate!</a>
    </div>

    Может быть, чуть лучше?

    Это слабое изменение, как раз в случае если вы хотите его так, что #boxэлемент будет всегда 160px от верхней части. Он делает это, используя position:fixedединственное реальное изменение от этого кода к коду до того, что есть больше HTML и что стили CSS изменились.

    $(function() {
    
      $('#activator').on('click', function(e) {
        var $box = $('#box');
        //I hate repeating myself in code.
        e.preventDefault();
        //Make sure the link doesn't do that thing we don't want it to do.
        $box.toggleClass('visible')
      })
    })
    #box {
      position: fixed;
      transition: all 400ms linear;
      top: -100%;
    }
    #box.visible {
      top: 160px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="box">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, consectetur.</p>
      <p>Sequi alias debitis quos provident tenetur quis non odio. Voluptatum.</p>
      <p>Illum reprehenderit ducimus delectus. Totam maxime harum, ratione eligendi aut.</p>
      <p>Mollitia iusto enim eveniet corporis obcaecati. Veritatis quia velit perspiciatis.</p>
      <p>Eveniet repudiandae sed ipsa eos, tempora quidem sit ipsam non.</p>
    </div>
    <div class="main">
      <h3>Hello!</h3>
      <a href="#" id="activator">Activate!</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis sequi vitae deleniti commodi hic recusandae officia et unde nesciunt beatae eos sit obcaecati, fuga sapiente expedita aliquam, atque minima. Doloremque.</p>
      <p>Eligendi illo molestiae, consequatur, temporibus quos repellat quod quasi nemo quibusdam deleniti sapiente cum similique sequi. Optio voluptates eius vel cupiditate quidem sunt maiores nesciunt doloribus. Maiores nam aliquam molestiae!</p>
      <p>Iure illo qui iusto minima. Accusamus veritatis quas similique, magnam fugiat provident quam officiis qui deserunt, eveniet non. Voluptas quaerat nobis sequi ex repellendus ea, quibusdam dolorem ipsam. Beatae, neque.</p>
      <p>Esse deserunt recusandae assumenda dolorem, perferendis magni nostrum atque, cumque. Ex molestiae exercitationem ipsa ullam porro delectus minima, quos sunt eveniet iure eaque ut a, nam ea! Officiis, dolorum, optio.</p>
      <p>Eius debitis voluptatum molestiae cumque cupiditate, reprehenderit reiciendis consequatur similique autem commodi necessitatibus corporis voluptatem eaque officia animi pariatur optio dolores voluptates ipsa amet molestias illum. Eveniet molestiae laboriosam,
        ipsum.</p>
      <p>Corporis ad fugiat nostrum architecto deserunt, voluptatum et facilis suscipit eaque eligendi qui consectetur veritatis possimus id dolorum porro provident, repellendus magnam! Magnam ullam autem laborum accusamus nobis ipsa, sunt.</p>
      <p>Cumque nihil laboriosam suscipit corrupti unde quos inventore, corporis odit esse accusantium tempore ea saepe asperiores vero quam eligendi veniam harum. Ex in vel tempora ipsa consectetur fuga amet esse.</p>
      <p>Sequi, nobis, pariatur autem omnis consectetur voluptatibus nulla? Ea ratione enim rerum nihil. Hic quidem commodi itaque, quam optio minus accusantium possimus repellat, accusamus error illum omnis, dolorem esse dolore.</p>
      <p>Sint quam doloremque vel error, dolorem repudiandae natus aliquid et dolorum esse tenetur commodi quis? Ipsa adipisci eveniet error. Quos veniam minus, ipsam id porro perspiciatis consequatur adipisci magni molestias!</p>
      <p>Explicabo ut maiores animi iusto fuga maxime amet saepe exercitationem debitis quos harum quis eaque repellendus modi odio, consectetur quibusdam tempore aspernatur vel dolores similique labore sapiente, incidunt. Illum, aperiam.</p>
      <p>Aliquid temporibus quia error voluptatum, asperiores perferendis ex sed quam delectus assumenda veritatis repellendus exercitationem id doloremque fugit soluta fuga veniam, totam enim, libero quidem deserunt eveniet culpa harum. Mollitia.</p>
      <p>Eos assumenda unde, modi. Necessitatibus porro, tempore distinctio eaque quos doloribus accusantium quaerat molestiae mollitia id. Unde, minima, sapiente error, vero quod soluta excepturi illum eligendi sequi aspernatur dolorum. Vero.</p>
      <p>Doloribus natus odit, asperiores pariatur placeat nam mollitia! Eaque sapiente quos, dolorem minus eius vero dicta laboriosam, odit accusamus quae blanditiis nihil accusantium modi reprehenderit quibusdam excepturi. Illum, repellendus, fuga.</p>
      <p>Facilis, maxime magni impedit voluptatem atque illo explicabo dolorum iure eius laudantium maiores minima sit possimus vitae aut quibusdam hic nemo, nesciunt delectus repellat. Ab tempora similique delectus amet quos.</p>
      <p>Alias aut saepe eaque sapiente velit soluta commodi, aspernatur maxime cumque qui rerum et modi distinctio temporibus molestiae, quae voluptatem nobis esse ipsa, recusandae. Soluta sint quae qui architecto odit!</p>
      <p>Accusantium quam perferendis aperiam, unde? Sunt cumque, quod non reiciendis, possimus laborum. Quod corporis aperiam alias laudantium facere tempora iure, consequatur corrupti fuga nobis nostrum vel voluptates ut consequuntur iste!</p>
      <p>Cum rerum dignissimos voluptates assumenda enim doloremque quidem ipsum iusto quaerat ex amet magnam ab nam adipisci consectetur perspiciatis eveniet fuga quae debitis, quibusdam at neque! Voluptates quaerat cumque labore.</p>
      <p>Omnis, labore aspernatur provident deleniti aliquid quasi accusamus mollitia eveniet consequatur voluptatum eligendi officiis perspiciatis ut praesentium delectus, modi eum magnam odio! Dolores quod porro nesciunt, sint quis iure nulla!</p>
      <p>Exercitationem earum enim autem, adipisci temporibus rem itaque beatae quidem est nesciunt hic eligendi molestias, ea repellendus. Necessitatibus possimus deleniti blanditiis molestiae nihil minus ducimus veniam tempora commodi incidunt, labore!</p>
      <p>Consequuntur, laboriosam praesentium temporibus sunt illo atque minus et neque, cumque minima natus ducimus velit. Cumque ab expedita fugiat libero eaque aut laudantium consequatur voluptatibus error similique. Blanditiis, sapiente fuga.</p>
      <p>Voluptas quo quidem minus sint aperiam culpa nulla debitis commodi et id explicabo amet vitae, illo optio deserunt recusandae ducimus harum adipisci, quam repudiandae blanditiis in aliquam. Modi, numquam, magnam!</p>
      <p>Iure nulla neque quis officiis, blanditiis sit autem nobis laboriosam ex! Fuga praesentium reiciendis harum excepturi doloribus suscipit, accusantium iste eligendi nobis, adipisci eveniet illum quibusdam placeat nihil quaerat, maiores!</p>
      <p>Eos sed ex, eveniet totam enim consequuntur molestias nobis quia tempora eaque rem atque veritatis suscipit vero ratione. Ducimus autem perferendis iusto, rerum molestias deserunt omnis, laborum harum reiciendis commodi.</p>
      <p>Dicta quae mollitia accusantium voluptate vitae modi illum, alias, quam provident dolores consequuntur. Incidunt quaerat tempore nulla voluptatem voluptates eos culpa ab a officia, earum optio sit dicta, neque magni.</p>
      <p>Vitae deleniti voluptatibus eveniet doloremque tenetur odit quasi magnam, mollitia, fugiat, numquam sapiente autem delectus distinctio possimus et hic, sint provident error iste. Perferendis quisquam ullam repellat debitis possimus non.</p>
      <p>Ad dolore possimus rem suscipit sit ullam deserunt itaque quisquam impedit veritatis voluptates atque facilis, quos iure rerum mollitia cumque dicta inventore commodi, soluta minus modi. Accusantium reiciendis neque quidem.</p>
      <p>At quo, impedit ut expedita dolor necessitatibus quibusdam laborum quidem animi non est inventore dolorum sunt unde odit eos error itaque esse excepturi perferendis explicabo reiciendis! Unde quo consectetur molestias.</p>
      <p>Quidem quas doloremque nisi corporis error omnis vitae odio, qui et maiores eius illum culpa enim aliquam, placeat asperiores, aperiam ea molestias rerum, amet. Facere quia, iure quidem! Ad, nihil.</p>
      <p>Vero laborum, sint dolores accusantium placeat, quis asperiores adipisci sit, vitae possimus quae. Blanditiis non asperiores modi, nemo cupiditate autem voluptas! Suscipit consectetur vel aperiam error, quam ea, corporis atque!</p>
      <p>Soluta ipsum, quasi, tenetur nam dolorem iste vel. Velit tempora esse, soluta. Quisquam impedit deserunt culpa cum, explicabo perspiciatis fugiat maxime ex. Distinctio mollitia perferendis ut quos porro, eos. Eius.</p>
    </div>