jQuery-滑动切换,用关闭按钮滚动页面?
我不熟悉jQuery。我正在使用.slideToggle使DIV显示在我所有内容的底部。我已经得到了使DIV出现的代码,以及向下滚动到该DIV的页面 但是,我想制作一个额外的按钮/链接,然后隐藏内容并向上滚动 我得到的代码允许我做所有这些,但是只有一个链接可以切换显示和隐藏,这不是很有用,因为我现在需要隐藏链接在我所有内容的底部 请让我知道,如果你有任何想法如何做到这一点 jQuery代码jQuery-滑动切换,用关闭按钮滚动页面?,jquery,scroll,slidetoggle,Jquery,Scroll,Slidetoggle,我不熟悉jQuery。我正在使用.slideToggle使DIV显示在我所有内容的底部。我已经得到了使DIV出现的代码,以及向下滚动到该DIV的页面 但是,我想制作一个额外的按钮/链接,然后隐藏内容并向上滚动 我得到的代码允许我做所有这些,但是只有一个链接可以切换显示和隐藏,这不是很有用,因为我现在需要隐藏链接在我所有内容的底部 请让我知道,如果你有任何想法如何做到这一点 jQuery代码 var height = $('#slickbox').hide().height(); $('.more
var height = $('#slickbox').hide().height();
$('.more a').toggle(function() {
$('#slickbox').slideDown(3200);
$('html, body').animate({ scrollTop: '+=' + height }, 3200);
return false;
}, function() {
$('#slickbox').slideUp(3200);
$('html, body').animate({ scrollTop: '-=' + height }, 3200);
return false;
});
HTML
我在使用空间!
-
-
以下是我迄今为止所得到的一个例子:
当你点击“更多”按钮时,一切都会按我想要的方式下降和滚动。但是当你按下关闭按钮时,你必须按下两次。有什么办法吗?我会这样做。使用一个在“更多/关闭”之间切换的链接。我使用动画回调来进行切换
或者,如果希望保留这两个按钮,则可以将单独的处理程序绑定到每个按钮。两个字段都用于单击,但一个“more”将执行切换代码的第一部分,“close”将执行第二部分。您已将两个字段绑定到同一个处理程序。但是,当您第一次使用open处理程序时单击
close
。(单击“更多”之前的“关闭”,您将看到它打开图像)。你想两者都切换图像还是一个总是打开一个总是关闭?一个总是打开一个总是关闭一个就可以了。我该怎么做呢?非常感谢你的回复!这是一个非常方便的提示,我很高兴你给我看了。我将大胆地在未来使用它,但现在我需要它是两个独立的按钮。当你说我需要为每个按钮绑定单独的处理程序时,你是说我需要使用两个单独的代码,一个按钮使div可见,一个全新的代码和按钮来隐藏它?
<div style="height: 300px; border: solid 1px #ddd;">I'm using space!</div>
<div class="donate done">
<h3 class="more"><a href="#" title="More"> More </a></h3>
</div>
<div id="slickbox">
<div id="slide_show">
<div id="slider">
<ul>
<li>
<img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="700" height="1300" />
</li>
<li>
<img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="700" height="1300" />
</li>
</ul>
</div>
</div>
</div>
<div class="close">
<h3 class="more"><a href="#" title="More">Close</a></h3>
</div>
var height = $('#slickbox').hide().height();
$('.more a').toggle(function() {
var $this = $(this);
$('#slickbox').slideDown(3200);
$('html, body').animate({ scrollTop: '+=' + height }, 3200, function() {
$this.html('Close');
});
return false;
}, function() {
var $this = $(this);
$('#slickbox').slideUp(3200);
$('html, body').animate({ scrollTop: '-=' + height }, 3200, function(){
$this.html('More');
});
$(this).html('More');
return false;
});