Question

在Demo 01中，您可以看到Div正在滚动页面顶部，增加高度。我需要使用单击按钮的相同动画，例如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的内容，该moveAndResize映射到要更改的项目的索引。

单击按钮Scroll Div窗口顶部增加高度

2 个答案: