Question

我在网站上遇到jQuery .animate功能的问题我从第一天就开始对我提出异议，但我还没有找到解决方案（请参阅http://www.standrewsvoluntaryservice.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>

Answer 1

唉，好吧我尝试添加这个作为评论，但它太长了。所以我打算将它作为答案添加。即使它没有具体回答你的问题。

它只是一个简单的例子，说明如何在干燥时做你做的事情。它不是复制和粘贴实现，但如果您使用类似的东西，的问题就会消失。

<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>

jQuery .animate在Chrome和Safari中跳跃

1 个答案: