Question

我有这个jquery脚本，它检测元素顶部位置，如果它在屏幕上可见，则添加动画。这仅在我稍微滚动屏幕时才有效。但是当页面加载时它不会添加动画。

所以我尝试记录 tiles 选择器。当页面加载时，它不会选择带有 fadeInTile 类的元素，但只有在滚动屏幕后，我才能看到具有该类名的所有元素。

$(document).ready(function(){
    function scrollCb() {
        var tiles = $(".fadeInTile").not(".animated")
        var $window = $(window);

        var docViewTop = $window.scrollTop();
        var docViewBottom = docViewTop + $window.height();
        console.log(tiles)

        tiles.each(function (i) {
            var $this = $(this);
            var elemTop = $this.offset().top;

            if ((elemTop <= (docViewBottom - 70))) {
                $this.addClass("animated").addClass("fadeInUp");
            }
        });
    }
    $(window).scroll(scrollCb)
    scrollCb()
})

.fadeInTile

.fadeInTile{
    opacity: 0;
}

修改我创建了一个小提琴http://jsfiddle.net/scza61pq/，它工作正常。但它在我的页面中无效。我的网站建立在angularjs上这与此有关吗？

Answer 1

使用$j=jQuery.noConflict();并使用$j选择器代替$

Answer 2

只是让你的功能不再准备好了。它可能会起作用

function scrollCb() {
        var tiles = $(".fadeInTile").not(".animated")
        var $window = $(window);

        var docViewTop = $window.scrollTop();
        var docViewBottom = docViewTop + $window.height();
        console.log(tiles)

        tiles.each(function (i) {
            var $this = $(this);
            var elemTop = $this.offset().top;

            if ((elemTop <= (docViewBottom - 70))) {
                $this.addClass("animated").addClass("fadeInUp");
            }
        });
    }
$(document).ready(function(){

    $(window).scroll(scrollCb)
    scrollCb()
})

Jquery选择器不在页面加载时工作，但在滚动后工作

2 个答案: