当前位置：文江博客话题详情

使用 JQuery 向上/向下滑动直到达到一定高度 - 这可能吗？

发布于 2024-12-20 08:06:58 字数 87 浏览 0 评论 0原文

是否可以将 div 向上滑动（关闭它）但不能完全滑动？

我的意思是，向上滑动但保留显示一点 div，这可能吗？

提前致谢，内存

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泅人 2024-12-27 08:06:58

像这样的东西可能会起作用：

$("#div").toggle(
function(){
   $("#div").animate( { height:"500px" }, { queue:false, duration:500 });
},
function(){
   $("#div").animate( { height:"50px" }, { queue:false, duration:500 });
});

它可以不是 500px 它可以只是 div 的原始大小，并且 30px 可以是您想要显示的任意大小被隐藏。

从评论更新

这是一个小提琴，显示如果在变量中声明它可以允许不同的高度。动画后淡出应该不是问题。

http://jsfiddle.net/Skooljester/HdQSX/

var divTest = $("#test").height();
$("#test").toggle(
function(){
   $("#test").animate({ height: divTest + 'px' }, { queue: false, duration: 500 });
},
function(){
   $("#test").animate({ height:'50px' }, { queue: false, duration: 500 });
});

#test {
  display: block;
  background: #FF0000;
  height: 500px;
  width: 300px;
}

<div id="test">Test</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Something like this may work:

$("#div").toggle(
function(){
   $("#div").animate( { height:"500px" }, { queue:false, duration:500 });
},
function(){
   $("#div").animate( { height:"50px" }, { queue:false, duration:500 });
});

Instead of the 500px it can just be the original size of the div, and the 30px can be however much you want to show when it's meant to be hidden.

Update from the comments

Here's a fiddle showing that it can allow different heights if declared in a variable. And fading out after animation shouldn't be a problem.

http://jsfiddle.net/Skooljester/HdQSX/

var divTest = $("#test").height();
$("#test").toggle(
function(){
   $("#test").animate({ height: divTest + 'px' }, { queue: false, duration: 500 });
},
function(){
   $("#test").animate({ height:'50px' }, { queue: false, duration: 500 });
});

#test {
  display: block;
  background: #FF0000;
  height: 500px;
  width: 300px;
}

<div id="test">Test</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

回复收藏 0 原文

终难遇 2024-12-27 08:06:58

我不建议使用 jQuery 的 animate 方法，因为它在某些浏览器中有时会出现错误。
通过设置 div 高度或最大高度，使用 CSS 过渡对幻灯片进行动画处理是一个更好的选择（根据我的说法）。

CSS：

.expandable {
  max-height: 3em;
  overflow: hidden;
  transition: max-height .3s;
}

单击时，使用 jQuery 设置最大高度：

$(.someSelector).css('max-height', expandedHeight);

然后在再次单击时删除样式：

$(.someSelector).attr('style', '');

您可以查看这个演示示例

I don't recommend using jQuery's animate method because it's sometimes buggy in some browsers.
Animate the slide with CSS transitions is a better choice (according to me), by setting the div height or max-height.

CSS:

.expandable {
  max-height: 3em;
  overflow: hidden;
  transition: max-height .3s;
}

on click, set max-height with jQuery:

$(.someSelector).css('max-height', expandedHeight);

Then remove the styling when it's clicked again:

$(.someSelector).attr('style', '');

You can look at this demo example

回复收藏 0 原文

任谁 2024-12-27 08:06:58

将 div 打开到其原始高度的更好方法是使用 SlideDown()。
问题是这个函数需要先隐藏div才能打开它。
下面的方法有点难看，但效果很好：

$("#test").toggle(
function(){
   $("#test").css('height', 'auto').hide().slideDown('fast');
},
function(){
   $("#test").animate( { height:'50px' }, { queue:false, duration:500 });
});

The better way to open div to its original height is using slideDown().
The problem is that this function requires div to be hidden before it can open it.
The following way is a little bit ugly but works well:

$("#test").toggle(
function(){
   $("#test").css('height', 'auto').hide().slideDown('fast');
},
function(){
   $("#test").animate( { height:'50px' }, { queue:false, duration:500 });
});

回复收藏 0 原文

~没有更多了~