我无法让animate函数只移动指定的DIV。相反,它会移动整个页面。如果您点击下面链接中的“回复”,您可以看到我在说什么。我已经尝试将其切换为仅调用某些ID(即.wrap vs #header),但它没有做任何事情。你如何才能让它只为标题设置动画而不是滚动其他内容?
这是我的代码。还有更多内容,但我只包含了具有淡入/滚动属性的JQuery:
$.ajax({
type: "POST",
url: "http://mktietheknot.com/wp-content/themes/Retro/rsvp-process.php",
data: dataString,
dataType: "json",
success: function(data) {
if ( data.status == 'pass' ) {
$('#rsvp-form').fadeOut(function(){
$('#rsvp-form').html('<div class="rsvp-received">' +data.response+ '</div>').fadeIn(1000);
});
myTimer = $.timer(2500,function(){
$('#rsvp .rsvp-link').click();
});
}
else {
$('#rsvp-form').append('<div class="error">' +data.response+ '</div>');
$('#rsvp .submit').fadeIn('500');
console.debug(data);
}
}
});
return false;
});
});
$('#nav-rsvp a').unbind();
$('#nav-rsvp a, .rsvp-link').click(function(){
if ( $('.wrap').hasClass('open') ) {
$('.wrap').animate({
top: '-=115'
}, 750, 'easeInOutCubic');
$('.wrap').removeClass('open');
}
else {
$('.wrap').animate({
top: '+=115'
}, 750, 'easeInOutCubic');
$('.wrap').addClass('open');
}
return false;
});
})(jQuery);
这是他赞美CSS:
/* === Header Section === */
#header {
background:url(wp-content/themes/Retro/images/structure/body_bg.png) repeat-x scroll center bottom transparent;
padding: 0 0 13px;
position:fixed;
width: 100%;
z-index: 100;
}
#header .section_inn {
padding-top: 0;
background:url(http://mktietheknot.com/wp-content/themes/Retro/images/structure/body_bg_brown.png) repeat-x;
width: 100%;
height: 130px;
z-index: 1000;
}
#header .wrap {
background: none repeat scroll 0 0 transparent;
width: auto;
top:-115px;
}
谢谢你们!
答案 0 :(得分:0)
尝试在#header上设置顶级样式的动画。它需要动画
#header {top:115px}
答案 1 :(得分:0)
我偶然发现了这个问题。我的JQuery文件从我之前的问题开始工作。见(my previous question)。但是,当我弄乱我的wordpress主题附带的默认jquery文件时,我看到他们的onload有点不同。我试图改变它只是为了踢,它修复了它。不知道为什么,但确实如此。
此修复程序正在将(function($){})(jQuery);
更改为
jQuery.noConflict();
jQuery( document ).ready( function( $ ) {} );