如何在页面刷新时停止jQuery动画重新启动?
我用jquery创建了一个搜索表单,如下所示。 我希望当我打开搜索表单并刷新页面时,它不会关闭。 我怎样才能做到这一点 我尝试了如何在页面刷新时停止jQuery动画重新启动?,jquery,jquery-animate,reload,page-refresh,Jquery,Jquery Animate,Reload,Page Refresh,我用jquery创建了一个搜索表单,如下所示。 我希望当我打开搜索表单并刷新页面时,它不会关闭。 我怎样才能做到这一点 我尝试了e.preventDefault()和返回false但不起作用,我知道这与我的问题无关 这是我的代码: $globalsearch_submit.click(function(){ $('#stat').hide(); $('.wrapper-simple').animate({'width':'275px'}) .end().find(
e.preventDefault()
和返回false代码>但不起作用,我知道这与我的问题无关
这是我的代码:
$globalsearch_submit.click(function(){
$('#stat').hide();
$('.wrapper-simple').animate({'width':'275px'})
.end().find('.wrapper-simple input[type=text]').css({opacity: 0, visibility: "visible"}).animate({'width': '231px', opacity: 1})
.end().find('.wrapper-simple .button').animate({ 'right': '40px' })
.end().find('.wrapper-simple input[type=submit]').animate({'marginLeft':'235px', opacity: 1}, 10)
return false;
});
$('.wrapper-simple input[type=submit]').click(function() {
$('#stat').show();
$('#stat').delay(500).css('opacity',0).show().animate({opacity:1},100);
$('.wrapper-simple').animate({'width':'40px'})
.end().find('.wrapper-simple input[type=text]').animate({'width': '1px', opacity: 0})
.end().find('.wrapper-simple .button').animate({ 'right': '0' })
.end().find('.wrapper-simple input[type=submit]').animate({'marginLeft':'0', opacity: 0}).attr('value', '');
return false;
});
请帮忙!多谢各位
(很抱歉我的英语不好)我会使用文档哈希(window.location.hash)保存页面的当前状态
$('.wrapper-simple input[type=submit]').click(function() {
$('#stat').show();
$('#stat').delay(500).css('opacity',0).show().animate({'opacity':1},100);
$('.wrapper-simple').animate({'width':'40px'})
.end().find('.wrapper-simple input[type=text]').animate({'width': '1px', 'opacity': 0})
.end().find('.wrapper-simple .button').animate({'right': 0})
.end().find('.wrapper-simple input[type=submit]').animate({'marginLeft': 0, 'opacity': 0}).attr('value', '');
document.location.hash='form';
return false; // not related to this, but needed for other reasons
});
(在该示例中,我将其设置为“form”,因此在单击按钮后,页面的URL将显示为“mysite.com/mypage.htm#form”。您可以使用任何您喜欢的内容,但对允许使用的字符有一定的限制-请参见此答案:)
然后,您可以在页面加载时检测此标记:
$(document).ready(function(){
var h=window.location.hash.replace(/^#/,'');
if(h==='form'){
$('#stat').css({'opacity':1}).show();
$('.wrapper-simple').css({'width':'40px'})
.end().find('.wrapper-simple input[type=text]').css({'width': '1px', 'opacity': 0})
.end().find('.wrapper-simple .button').css({'right': 0})
.end().find('.wrapper-simple input[type=submit]').css({'marginLeft': 0, 'opacity': 0}).attr('value', '');
}
}
请注意,我复制了代码,但将所有动画调用更改为简单的css调用,以便立即更改
这意味着,一旦用户单击按钮,页面的任何刷新,或书签、关闭和从书签重新打开等都将意味着表单立即打开(页面加载时会有轻微闪烁,这是需要避免的更多工作)。此外,这并不使用cookies,cookies的问题越来越严重。要再次将表单标记为关闭,只需将哈希值设置为其他值(例如空字符串)
Twitter、谷歌、Facebook和其他许多网站都使用这种技术。use.As@DJDavid98说。在这个答案中,我在文档准备好时设置cookie,但在您的情况下,您可能希望在动画回调中设置cookie。然后在document ready上检查cookie是否已设置,如果已设置,则添加必要的样式以显示搜索框。