如何使用slideDown()函数进行缓动?
也许以某种方式扩展它?
我正在寻找这样的东西:
jQuery.fn.slideDown = function(speed, easing, callback) {
return ...
};
Run Code Online (Sandbox Code Playgroud)
所以我可以用它滑动这个
$('.class').slideDown('400','easeInQuad');
Run Code Online (Sandbox Code Playgroud)
或这个
$('.class').slideDown('400','easeInQuad',function(){
//callback
});
Run Code Online (Sandbox Code Playgroud) 我是Jquery的新手,但写过一部简单的垂直手风琴.这似乎是我需要的工作,但在滑动结束时有一个可见的混蛋.
如果有人能看到它并建议解决方案,它将阻止我拉出我的头发!
这是我的测试页面的链接(我的所有代码[css,js等]都在一个文件中以方便):Vertical Accordion
我遇到的麻烦.slideup()
和.slideDown()
看看下面的JSFiddle:http://jsfiddle.net/7se2r/4/
虽然行出现并消失,但我没有看到向上或向下滑动的动画.关于我做错了什么的任何线索?
我有以下HTML代码
<div class="text">bla bla bla bla</div>
<div class="button">Show</div>
Run Code Online (Sandbox Code Playgroud)
和CSS
.text{
height:100px;
overflow:hidden;
}
Run Code Online (Sandbox Code Playgroud)
假设.text
div
有更多文本,我所做的是隐藏100px以下的文本量.
我怎样才能slideDown()
在div
这样我就可以查看文本,当我点击按钮?
使用$(".button").slideDown();
不起作用,因为我需要删除高度,然后slideDown()
这也无法正常工作.
我在下面有jQuery .slideUp和.slideDown函数,当到达#showfootershop
浏览器窗口底部的div时,#footershop
div会向上滑动,然后立即向下滑动.
如何在浏览器窗口底部#footershop
保持"向上"和可见状态#showfootershop
,并且在用户向上滚动浏览器窗口之前不能向下滑动?
小提琴: http ://jsfiddle.net/8PUa9/1/
jQuery的:
$(window).scroll(function(){
/* when reaching the element with id "showfootershop" we want to
show the slidebox. */
var distanceTop = $('#showfootershop').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$("#footershop").slideUp();
else
$("#footershop").slideDown();
});
Run Code Online (Sandbox Code Playgroud)
页脚中的html:
<div id="showfootershop"></div>
<div id="footershop">
<h1>Shop Links</h1>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
CSS:
#footershop {
height:35px;
width:100%;
display: none;
z-index: 2;
}
Run Code Online (Sandbox Code Playgroud) 我正在尝试实现一个非常简单的页脚通知元素,以便向上滑动片刻,然后向下滑动.我正在使用:
$('button').click( function () {
$('#message-box').slideUp('slow').delay(1500).slideDown('slow');
});
Run Code Online (Sandbox Code Playgroud)
但是,当您单击该按钮时,它会延迟1500毫秒,然后向上滑动,不会向下滑动.
做slideUp('slow')
和hide('slow')
导致相同的动画效果?
示例代码:
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide('slow');
});
$("#show").click(function(){
$("p").show('slow');
});
});
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
Run Code Online (Sandbox Code Playgroud) 我在我的移动网站上使用zepto库.我最近了解到zepto没有slideDown()
像jquery 这样的插件.我想为zepto实现相同的功能.
我在jsfiddle上尝试了一个(http://jsfiddle.net/goje87/keHMp/1/).这里显示元素时没有动画.它只是闪烁下来.我如何引入动画?
PS:我无法提供固定高度,因为我将此插件应用于其高度属性不可知的元素.
谢谢!
当我试图滑下我的更多信息div时,我有一个计时问题.我想要的功能是,一旦页面已经渲染,div就会从顶部向下滑动.我的问题是如果我使用$(document).ready()..动画不会明显出现.
这是我的代码:
$(document).ready(function() {
$(".MoreInfo").slideDown('slow');
});
Run Code Online (Sandbox Code Playgroud)
例如,如果我将它绑在其他元素的点击上,那么它的效果非常好.但是我不确定如果页面加载后如何使其明显滑下来.谢谢!