Question

几周前，我开始开发一个新的个人投资组合网站。我现在对界面感到满意，但是动画太迟了（特别是在Firefox上）。我试图找到问题几天，但我找不到它。有人可以帮我看一下吗？

关于网站：您可以使用mousedown和drag功能水平和垂直滑动。

当网站变得迟钝时：

页面加载 - 当项目滑入时
当mousedown并拖动时
在＆＃39;列表 - 按钮上单击＆＃39;

＆＃13;

$(document).ready(function(){
    
    //Fade in projects
    $('#projects ul').children().each(function(i){
        $(this).delay(i*50).stop().animate({opacity: "1"}, 800);
    });
    
    //Show project images
    setTimeout(function(){
        $('#projects li').each(function(i){
            var t = $(this);
            setTimeout(function(){ t.addClass('projectsSlidein'); }, (i+1) * 50);
        });
    }, 1000);
    
    //When mouse down - scale projects
    $('#projects').mousedown(function() {
        $('#projects').addClass('animateSmall');
    });
    
    //When mouse up - scale projects back to normal size
    $('#projects').mouseup(function() {
        $('#projects').removeClass('animateSmall');
    });
    
    //When hover project - Show image
    $('#projects li').mouseenter(function() {
        $(this).removeClass('projectsSlidein');
    });
    
    //When leave project - Hide image
    $('#projects li').mouseleave(function() {
        $(this).addClass('projectsSlidein');
    });

});

//Drag and scroll function
$(function(){
    var curDown = false,
      curYPos = 0,
      curXPos = 0;
    $('#projects').mousemove(function(m){
    if(curDown === true){
     $(window).scrollTop($(window).scrollTop() + (curYPos - m.pageY)); 
     $(window).scrollLeft($(window).scrollLeft() + (curXPos - m.pageX));
    }
    });

    $('#projects').mousedown(function(m){
    curDown = true;
    curYPos = m.pageY;
    curXPos = m.pageX;
    });

    $('#projects').mouseup(function(){
    curDown = false;
    });
});

＆＃13;

li {
    list-style: none;
}

#projects {
    width: 3500px;
    height: 2100px;
    background-color: transparent;
    position: relative;
    z-index: 0;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    transition: transform 0.3s;
    transform: scale(1.05);
}

#cursor.animateSmall {
    transform: scale(0.5) !important;
}

#projects.animateSmall {
    transform: scale(1.0) !important;
}

#cursor.animateBig {
    transform: scale(2.5);
}

#projects ul {
    width: 4500px;
    height: auto;
    margin: 0 auto;
    position: relative;
    margin-left: -500px;
    margin-top: -100px;
}


#projects ul:first-of-type li, #projects ul:last-of-type li {
    opacity: 0.2 !important;
    -webkit-filter: grayscale(100%) !important;
    filter: grayscale(100%) !important;
    pointer-events: none !important;
}

#projects li {
    width: 600px;
    height: 400px;
    margin-bottom: 80px;
    position: relative;
    float: left;
    margin-right: 50px;
    background-color: #333;
    background-repeat: no-repeat;
    background-position: top;
    background-image: url(http://dev2.iamfrank.eu/images/portfolio/campus/cover.jpg);
    border: 0px;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
    opacity: 0;
}

.projectsSlidein {
    background-position: bottom !important;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

#projects ul li:first-of-type { 
    opacity: 0.2 !important;
    -webkit-filter: grayscale(100%) !important;
    filter: grayscale(100%) !important;
    pointer-events: none !important;
}

#projects ul li:last-of-type {
    margin-right: 0px !important;
    opacity: 0.2  !important;
    -webkit-filter: grayscale(100%)  !important;
    filter: grayscale(100%)  !important;
    pointer-events: none !important;
}

#projects li:nth-child(even) {margin-top: 50px;}
#projects li:nth-child(odd) {margin-top: -200px;}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>  
    <section id="projects">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

＆＃13;

非常感谢！

弗兰克（只是一个新手）

网站真的落后于Firefox，还有一点在Safari / Chrome中（第一次用css3和jQuery尝试动画）

0 个答案: