1

以下を使用して、クリックでアニメーション化するパネルを作成しました。

 <script>
function toggleSlider() {
    if ($("#panelThatSlides").is(":visible")) {
        $("#contentThatFades").animate(
            {
                opacity: "0"
            },
            600,
            function(){
                $("#panelThatSlides").slideUp();
            }
        );
    }
    else {
        $("#panelThatSlides").slideDown(600, function(){
            $("#contentThatFades").animate(
                {

                 opacity: "1",
                },
                600
            );
        });
    }   
}
</script>

これはうまく機能しますが、一部の画面サイズでアニメーションがダウンすると、コンテンツが表示されません (ブラウザの下端より下にあります)。私がする必要があるのは、ページを同時に上にスクロールさせることです-何かアイデアはありますか? yhx

4

1 に答える 1

1

必要な基本機能は次のとおりです。

$('html,body').animate({ 
  scrollTop: $('#panelThatSlides').offset().top 
}, 600);

アップデート：

id [ ] をアンカーに追加し、イベントid="sliderbtn"を削除するだけです。onclick

 <a href="#" onclick="toggleSlider();"><img alt="" src="/images/css/blind.jpg" /></a>

これであなたのJavaScriptを更新してください：

$(document).ready(function() {
$("#sliderbtn").click(function () {
if ($("#panelThatSlides").is(":visible")) {
    $("#contentThatFades").animate(
        {
            opacity: "0"
        },
        600,
        function(){
            $("#panelThatSlides").slideUp();
        }
    );
}
else {
    $("#panelThatSlides").slideDown(600, function(){
        $("#contentThatFades").animate(
            {
                opacity: "1"
            },
            600
        );
        $('html,body').animate({ 
         scrollTop: $('#panelThatSlides').offset().top 
        }, 600);
    });
}  
});
});

これがあなたが望んでいたものかどうかを確認してください。:)

于 2013-03-10T20:55:14.263 に答える