0

我正在创建一个类似于 TypeCode ( http://typecode.com/work/ ) 的投资组合部分。我有简单的 jQuery 动画在点击时扩展和收缩 div。有没有办法像在 TypeCode 上一样在每次点击时集中浏览器中的 div?

    // Select portfolio item
var active = false;
$('.portfolio-item').click(function(e) {

    // Check if alternative tab is open and then close it
     if ( $('#one').css("height") == "220px" ) {
        $('#one').animate({
            height: '110px',
        }, 1000, function() {
            // Animation complete    
        });
        active = false;
     }; // End if

    if ( $('#two').css("height") == "220px" ) {
        $('#two').animate({
            height: '110px',
        }, 1000, function() {
            // Animation complete    
        });
        active = false;
     }; // End if

    if (active == false) {
        $('.portfolio-item').css("height", "110px");

        $(this).animate({
            height: '220px',
        }, 1000, function() {
            // Animation complete    
        });

        active = true;
    }; // End if


}); // End click function


// Close portfolio item
$('.close').click(function(e) {
    e.stopPropagation();

    $(this).parents('.portfolio-item').animate({
        height: '110px',
    }, 1000, function() {

    });

    active = false;
}); 

这是基本的小提琴:http: //jsfiddle.net/7Avu9/1/

如您所见,如果您单击另一个选项卡(仅来自前 2 个),则当前选项卡将关闭,新选项卡将打开。这适用于少量内容,但对于较大的内容,这不会很好地显示。

4

1 回答 1

0

jsFiddle

$('article').click(function(){
    $(this).toggleClass('state-collapsed');
    $('html,body').animate({scrollTop: $(this).offset().top}, 500);
});

这应该会有所帮助

于 2013-08-28T09:20:56.153 回答