Question

I have a problem with jQuery’s .animate feature on website I manage that’s bugged me since day one but I have yet to find a solution for (please refer to http://www.standrewsvoluntaryservice.org.uk/find.php).

When clicking on one of the coloured links, for example “Youth”, I have set the jQuery so that the links all cluster up at the right of the page and content appears for the selected link. In Firefox this works as expected, but in IE, Safari and Chrome there is a huge jump before the block settles at the top of the page, as it should.

Any help would be appreciated – I am not the best with jQuery and have searched many times for an answer but to no avail!

Edit: The jQuery that controls this show-hide-slide effect is:

<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

Argh, okay I tried adding this as a comment but its too long. So I’m going to add it as an answer. Even though it doesn’t answer your question specifically.

Its just a simple example of how to do what your doing whilst being DRY. It’s not a copy&paste implementation but your problem should disappear if you use something similar.

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