在单击按钮上滚动Div窗口顶部随着高度的增加

Question

在演示01中，您可以看到页面顶部的Div is Scrolling随着高度的增加而增加。 而且我需要单击按钮具有相同的动画，如Demo 02中所示 。

$('.work-showcase').click(function(){
    $('.work-showcase').animate({height:'135px'}, 500);
  $(this).animate({height:'400px'}, 500,function() {  
  $("html, body").animate({ scrollTop: $(this).offset().top });  
  });
    });

Answer 1

不知道我是否了解您想要什么，但是请查看此Javascript是否适合您：

    var map = {
        "slice1": "#post1",
        "slice2": "#post2",
        "slice3": "#post3",
    }

    $('.clickable').click(function(){
        var postId = map[$(this).attr('id')];
        $('.post').animate({height:'50px'}, 500);
        $(postId).animate({height:'400px'}, 500,function() {  
            $("html, body").animate({ scrollTop: $(postId).offset().top });  
        });
    });

请参阅http://jsfiddle.net/xCKPW/1/上的演示。

Answer 2

我想您要做的就是单击按钮时当前触发的动画和大小更改。

我也怀疑您希望单击图像时执行该操作。

在这种情况下，请将动画移动到单独的函数中，然后在onclick上调用该函数。 这是您的jsfiddle更新的按钮。 http://jsfiddle.net/Jq4Vw/132/

$('.work-showcase, button').click(function(){
    moveAndResize($(this).index());
});


function moveAndResize(index){
    var item = $('.work-showcase:eq('+index+')');
    $('.work-showcase').animate({height:'135px'}, 500);
  $(item).animate({height:'400px'}, 500,function() {  
  $("html, body").animate({ scrollTop: $(item).offset().top });  
  });
}

只要索引相同，此方法就起作用。 如果您希望按钮的索引不同，请添加一个id标记或其他内容，然后将其传递给moveAndResize，该映射映射到您要更改的项目的索引。