1

所以我正在构建一个界面，我的 div 上有一个 jQuery，它使它们的大小增加，然后使我的 wrap div 滚动，以便单击的 div 显示在屏幕顶部。

我的问题是 scrollTop 动作似乎注册了最后一次点击的 div 的最高值，因此如果最后一次点击的 div 的最高值不是 0，则在中途停止滚动。

这是我的脚本：

$(".blow").click(function () {

    if ($(this).attr("data-blow") == "false") {
        $(this).animate({
            left: '0px',
            height: '100%',
            opacity: 0.95
        }, 'slow', function () {
            $('#wrap').animate({
                scrollTop: $(this).offset().top
            }, 'slow');
            $(this).removeClass('blow')
            $(this).addClass('overflow')
            $(this).attr("data-blow", "true")
        });
    } else {
        $(this).animate({
            left: '-75%',
            height: '24%',
            opacity: 0.6
        }, 'slow')
        $(this).removeClass('overflow')
        $(this).addClass('blow')
        $(this).attr("data-blow", "false")
    }
});

如果你想看看它目前的行为，这里是链接：http ://www.rlacorne.com/blow

谢谢你的提示！

4

1 回答 1

1

.offset().top返回文档顶部和元素本身之间的像素数，包括滚动像素。这就解释了为什么如果用户尚未滚动页面，您的元素会正确展开和滚动，但是当您滚动时它不会按预期工作。

您将很难使用依赖于它自己的偏移量的绝对定位包装器来制作像这样的动画滚动。我建议完全放弃包装元素。我还建议为width属性设置动画而不是left，因为您的动画对其位置很敏感，而您实际上只是想扩展它。

这是我对 jsfiddle 的（愚蠢的）看法。它不是复制粘贴解决方案，需要进行一些调整才能按预期工作。

考虑以下 CSS 而不是提供的 CSS：

.blow { float:left; clear:left; width:25%; height:25%; overflow:hidden; background-color:hotpink; color:black; }

你可以使用这个 JavaScript：

$('.blow').on('click', function(event){
    var element = $(this);
    if(element.attr('data-blow') == 'true'){
        element.animate({ width:'25%', height:'25%' }, 1000).attr('data-blow', 'false')
    } else {
        element.animate({ width:'100%', height:'100%' }, 1000, function(){
            $('body').animate({ scrollTop: element.offset().top });
        }).attr('data-blow', 'true');
    }
});

差异，解释：

首先，您应该缓存您的$(this)引用，因为每次调用它时，它都会遍历 DOM 树以查找元素。

var element = $(this);

其次，您可以使用 jQuery 链接方法。代替：

$(this).removeClass('overflow')
$(this).addClass('blow')
$(this).attr("data-blow", "false")

...你可以做：

$(this).removeClass('overflow').addClass('blow').attr("data-blow", "false")

第三，这更多的是一种技术性，但$(element).click(handler)实际上是一种捷径$('element).on('click', handler)。我提倡.on()，因为它可以更好地理解事件和处理程序。

奖金：热粉。

于 2013-05-12T03:35:44.333 回答