我是jQuery的新手。我正在使用.slideToggle将DIV显示在我所有内容的底部。我有代码使DIV出现,页面向下滚动到那个DIV。
但是,我想创建一个额外的按钮/链接,然后隐藏内容并向上滚动。
我获得的代码允许我完成所有这些,但只有一个链接切换显示和隐藏,这不是很有用,因为我现在需要隐藏链接位于我所有内容的底部。 / p>
如果您对如何操作有任何想法,请与我们联系。
jQuery代码
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
<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>
以下是我到目前为止的一个例子:http://jsfiddle.net/eMYJx/47/
当您点击“更多”按钮时,所有内容都会按照我想要的方式下降和滚动。但是当你按下关闭按钮时,你必须按两次。有关这方面的任何想法吗?
答案 0 :(得分:1)
我会这样做。使用您在“更多/关闭”之间切换的一个链接。我使用动画回调来进行切换。
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;
});
或者,如果你想保留两个按钮,你可以将不同的处理程序绑定到每个按钮。两者都是点击,但是一个'more'将执行你的切换代码的第一部分,'close'将执行下半部分。