0

我管理的网站上的 jQuery.animate功能存在问题，从第一天起就一直困扰着我，但我还没有找到解决方案（请参阅http://www.standrewsvoluntedservice.org.uk/find.php）。

单击其中一个彩色链接时，例如“Youth”，我设置了 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 回答