0

管理しているWebサイトのjQueryの機能に問題があり、初日からバグがありますが、解決策がまだ見つかりません（ http://www.standrewsvoluntaryservice.org.uk/find.php.animateを参照してください）。

「Youth」などの色付きのリンクの1つをクリックすると、すべてのリンクがページの右側に集まり、選択したリンクのコンテンツが表示されるようにjQueryを設定しました。Firefoxではこれは期待どおりに機能しますが、IE、Safari、Chromeでは、ブロックがページの上部に落ち着く前に大きなジャンプがあります。

どんな助けでもいただければ幸いです-私はjQueryが得意ではなく、何度も答えを探してきましたが、役に立ちませんでした！

編集：このshow-hide-slide効果を制御するjQueryは次のとおりです。

<script type="text/javascript">
$(document).ready(function() {
$(".return_project_box").hide();
$('.info_show').click(function(){
    $(".area").hide();
    $(".find_body").delay(200).show();
        $(".project_area_displayer").hide();
        $(".find_body_projects").animate({
            width:"1000px"
            }, 400);
        $(".find_body_projects").removeClass("float_right");
        $(".project_box_constant").removeClass("small_project_box");
        $(".return_project_box").hide();
    var toggle_function = true;
    return false;
});

    var toggle_function = true;
    $('.youth_show').click(function(){
        $(".project_area_displayer").not(".youth").hide();
        $(".find_body").hide();
        if(toggle_function = true)
        {
            $(".youth").delay(200).slideDown();
            $(".find_body_projects").animate({
                width:"185px"
                }, 200);
            $(".find_body_projects").addClass("float_right");
                $(".project_box_constant").addClass("small_project_box");
        }
        $(".return_project_box").show();
        var toggle_function = false;
        $(".information").hide();
        return false;
    });
});
</script>
4

1 に答える 1

0

ああ、これをコメントとして追加してみましたが、長すぎます。だから私はそれを答えとして追加するつもりです。それはあなたの質問に具体的に答えていませんが。

それは、乾いた状態であなたがしていることをどのように行うかを示す簡単な例です。これはコピー＆ペーストの実装ではありませんが、同様のものを使用すると問題が解消されるはずです。

<div id="find_container">
    <div class="find_body_projects float_right">
        <a href="#youth" class="find_item"></a>
        <a href="#youth_special" class="find_item"></a>
        <a href="#adult_special" class="find_item"></a>
    </div>
</div>

<div id="project_content">
    <div id="youth" class="project_item active"></div>
    <div id="youth_special" class="project_item"></div>
    <div id="adult_special" class="project_item"></div>
</div>

<script>
$(function() { // On Doc Ready
    $('.find_item').on('click', function(e) { // Menu item is clicked
        e.preventDefault() // Prevent the default behavior of link
        var $chosen = $($(this).attr('href')) // Find the chosen page by using the href attr
        ,       $current = $('.project_item.active') // Find the currently chosen page by using the `.active` class
        if( !$chosen.length ) return false // Exit if the chosen page doesn't exist
        // Hide the current one
        $current.hide(function() {
            // Show the chosen one
            $chosen.slideDown()
        });
    })
});
</script>
于 2012-12-03T05:12:10.160 に答える