Jquery: 根据元素高度改变负位置
Jquery: change negative position based on element height
我有以下 Jquery 可以将一个框向上滑动并从 canvas 上滑下。它是为特定高度编写的，即 200px 框移动 -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 的高度。
如果没有你的确切 HTML，很难猜测你的 HTML 实际是什么样子，因此我无法实际测试这里写的内容，但理论上它应该有效。如需更准确的答案，请在您的相关 HTML 和 CSS 中 post，我会更新我的答案。
要获取内容的高度，您使用$(...).height()，内容之外的元素的高度通过$(...).outerHeight()访问，并将值true传递给.outerHeight() 函数 returns 对象的高度，包括任何 top/bottom 边距。
$(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 元素从 always 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>
我有以下 Jquery 可以将一个框向上滑动并从 canvas 上滑下。它是为特定高度编写的，即 200px 框移动 -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 的高度。
如果没有你的确切 HTML，很难猜测你的 HTML 实际是什么样子，因此我无法实际测试这里写的内容，但理论上它应该有效。如需更准确的答案，请在您的相关 HTML 和 CSS 中 post，我会更新我的答案。
要获取内容的高度，您使用$(...).height()，内容之外的元素的高度通过$(...).outerHeight()访问，并将值true传递给.outerHeight() 函数 returns 对象的高度，包括任何 top/bottom 边距。
$(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 元素从 always 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>