Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/76.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jQuery动画不工作,但筛选正在工作_Javascript_Jquery - Fatal编程技术网

Javascript jQuery动画不工作,但筛选正在工作

Javascript jQuery动画不工作,但筛选正在工作,javascript,jquery,Javascript,Jquery,我在昨天开发的一个网站上安装了同位素。直到一小时前,它还在正常工作。过滤器工作,但动画已停止 我不确定是什么导致动画停止工作。我没有在网站上更改任何内容。代码位于页脚中,但我在下面提供了它: <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/library/js/jquery-1.7.1.min.js"></script> <sc

我在昨天开发的一个网站上安装了同位素。直到一小时前,它还在正常工作。过滤器工作,但动画已停止

我不确定是什么导致动画停止工作。我没有在网站上更改任何内容。代码位于页脚中,但我在下面提供了它:

    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/library/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/library/js/jquery.isotope.min.js"></script>

    <script>
    $(window).load(function(){
        var $container = $('#main-home');
        $container.isotope({
            filter: '*',
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        $('#filters a').click(function(){
            $('#filters .selected').removeClass('selected');
            $(this).addClass('selected');

            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector,
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
             });
             return false;
        }); 
    });
    </script>

我解决了这个问题。我转到这个页面:并将CSS添加到网站中

由于某些原因,它在没有CSS的情况下工作,不知道为什么我必须在动画工作正常后添加它。

如果您设置:

animationEngine: 'best-available'
在CSS3转换和jQuery animate()之间选择动画


现在,您可以在此处找到动画描述和CSS代码:

您应该将以下样式添加到项目中

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: .7s;
    -moz-transition-duration: .7s;
    transition-duration: .7s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

谢谢这个-我有一个类似的问题,但不知道为什么排序工作,但没有动画!