指定されたDIVのみを移動するアニメーション関数を取得するのに問題があります。代わりに、ページ全体を移動します。下のリンクの「RSVP」をクリックすると、私が話していることがわかります。特定のID(つまり、.wrapと#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;
}
みんなありがとう!