Question

所以，我正在为我的一位好朋友写一个网站。我知道纯JavaScript，但jQuery对我来说只是一个乱七八糟的混乱。我没有花时间去学习它。但是，当我在互联网上找到它时，我不介意使用它。这就是jsFiddle发生的事情。当我找到它并使用它来翻译我构建的漫画阅读器上的页面时，我感到非常高兴。

我希望改变的代码在下面的一个工作示例中（如果jsFiddle死了，有人想要jsFiddle用户jtbowden这个很棒的代码）。

<html>
<head>

<script type="text/javascript" src="./jquery-1.js"></script>

<script type="text/javascript">

$(window).load(function(){
$('.box').click(function() {

$(this).animate({
    left: '-50%'
}, 500, function() {
    $(this).css('left', '150%');
    $(this).appendTo('#container');
});

$(this).next().animate({
    left: '50%'
}, 500);
});
})

</script>

<style type="text/css">
body {
padding: 0px;    
}

#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 310px;
overflow: hidden; 
background-color:black; 
}

.box {
position: absolute;
width: 23%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 5px;
margin-left: -25%;
}

img.cover {
position:absolute;
display:block;
margin-left:5%;
margin-right:auto;
top:5%;
height:90%
}

img.cover:hover {
position:absolute;
display:block;
margin-left:auto;
margin-right:auto;
top:0%;
height:100%
}

#box1 {
background-color: green;
left: 30%;
}

#box2 {
background-color: yellow;
}

#box3 {
background-color: red;
}

#box4 {
background-color: orange;
}

#box5 {
background-color: blue;
}
</style>
</head>

<body>
<div id="container">
<div id="box1" class="box"></div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>
</div>
</body>
</html>

然而，我的朋友不喜欢这段代码，因为他和我一样无法阅读。这是他的网站，他付给我足够的钱，所以他是老板。他被要求我将这个代码从jQuery重写为纯JavaScript，这样他就能理解它，这将使他能够在将来做出自己的改变，如果他需要或者只是觉得它。问题是，我不知道如何。我只是发现这个代码做了我想要的，将它添加到网站，并编辑CSS以适应我需要的。我不知道这段代码是如何工作的，也不知道我需要做些什么才能使它成为纯JavaScript。

我告诉他，但他并没有退缩。我被限制为网站的纯JavaScript，HTML5和CSS3。在将它投入纯JavaScript并且租金即将到期之前，他不会向我支付剩余的钱。所以，我有点希望有人能帮助我重新发明轮子并将此jsFiddle中的jQuery代码转换为纯JavaScript。

至少，你可以告诉我jQuery库中的代码和位，并告诉我这是做什么的，除了移动左属性？它是如何显示动画的（我接受它，这是.animate部分）？我以为浏览器在中间跳过帧？

我，我的朋友和（最终）我的房东会感激任何帮助。

提前致谢。

编辑：我用CSS动画重写了这个：

    <html>
    <head>

    <script type="text/javascript">
    function divSwitch(num) {
    var currentBox=document.getElementById("box"+num);
    if (num>=5) {
    num=0;
    }
    var nextBox=document.getElementById("box"+(num+1));

    var checkedButton = getCheckedRadio(document.forms.setOption.elements.aniOption);
    if (checkedButton) {
    switch(checkedButton.value) {
    case "R":
    currentBox.className="outFromRtL";
    nextBox.className="inFromRtL";
    break;

    case "L":
    currentBox.className="outFromLtR";
    nextBox.className="inFromLtR";
    break;  

    case "N":
    if (currentBox.className!="box") {
    for (var q=1; q<=5; q++) {
    var setBoxBack=document.getElementById("box"+q);
    setBoxBack.className="box";
    }
    }
    currentBox.style.left='-50%';
    nextBox.style.left='50%';
    break;

    default:
    alert("Well... That's not supposed to happen!  How did you break it!?");
    break;
    }
    }
    }

    function getCheckedRadio(radio_group) {
        for (var i = 0; i < radio_group.length; i++) {
            var button = radio_group[i];
            if (button.checked) {
                return button;
            }
        }
        return undefined;
    }
    </script>

    <style type="text/css">
        body {
        padding: 0px;    
    }

    #container {
        position: absolute;
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 310px;
        overflow: hidden; 
    background-color:black; 
    }

    .box {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: 150%;
        top: 5px;
    }

    .inFromRtL {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: 50%;
        top: 5px;

    -moz-animation-duration: 850ms;
    -moz-animation-name: rightSlideIn;
    -moz-animation-fill-mode: forwards;
    }

    @-moz-keyframes rightSlideIn {
          from {
            left:150%;
          }
          to {
            left:50%;
          }
    }

    .outFromRtL {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: -50%;
        top: 5px;

    -moz-animation-duration: 850ms;
    -moz-animation-name: rightSlideOut;
    -moz-animation-fill-mode: forwards;
    }

    @-moz-keyframes rightSlideOut {
          from {
            left:50%;
          }
          to {
            left:-150%;
          }
    }

    .inFromLtR {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: 50%;
        top: 5px;

    -moz-animation-duration: 850ms;
    -moz-animation-name: leftSlideIn;
    -moz-animation-fill-mode: forwards;
    }

    @-moz-keyframes leftSlideIn {
          from {
            left:-150%;
          }
          to {
            left:50%;
          }
    }

    .outFromLtR {
        position: absolute;
        width: 23%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: 150%;
        top: 5px;

    -moz-animation-duration: 850ms;
    -moz-animation-name: leftSlideOut;
    -moz-animation-fill-mode: forwards;
    }

    @-moz-keyframes leftSlideOut {
          from {
            left:50%;
          }
          to {
            left:150%;
          }
    }

    #box1 {
        background-color: green;
        left: 50%;
    }

    #box2 {
        background-color: yellow;
    }

    #box3 {
        background-color: red;
    }

    #box4 {
        background-color: orange;
    }

    #box5 {
        background-color: blue;
    }
      </style>
    </head>

    <body>
    <div id="container">
    <div id="box1" class="box" onclick="divSwitch(1);">Div #1</div>
    <div id="box2" class="box" onclick="divSwitch(2);">Div #2</div>
    <div id="box3" class="box" onclick="divSwitch(3);">Div #3</div>
    <div id="box4" class="box" onclick="divSwitch(4);">Div #4</div>
    <div id="box5" class="box" onclick="divSwitch(5);">Div #5</div>
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div id="animationOptions">
    <form id="setOption">
    <input type="radio" name="aniOption" id="L" value="L" checked="true">Left to Right
    <input type="radio" name="aniOption" id="R" value="R">Right to Left
    <input type="radio" name="aniOption" id="N" value="N">None
    </form>
    </div>
    </body>
    </html>

是的，这是一个更多的代码，但它仍然只有5kb，我不需要75kb的jQuery文件。

Answer 1

有两种方法可以解决这个问题，首先使用jsapi.info它会向您显示具体方法和功能的来源，另一种方法是查看和研究source code，这就是我的工作当一些模块或某些库没有好的文档时，Paul Irish称之为“专业人员的文档”，因为你知道纯JavaScript，你应该很容易阅读。希望有所帮助。

Answer 2

它不可能使它比它更简单。如果你展开jQuery，你会发现它背后的代码相对于你现在看到的非常复杂。在方法正在进行的操作中查看jquery.com文档会更容易。我会为你评论。

// when the window is loaded, do the code within
$(window).load(function() {
  // now i can assign events since the dom is loaded
  // but you could use $(document).ready instead

  // when any class with "box" is clicked, do the code within
  // this is binding a click event to all elements having a "box" class
  $('.box').click(function() {

    // animate the currently clicked "box" element
    $(this).animate({
      // move it left 50% and take 500 milliseconds to do it
      left: '-50%' 
    }, 500, function() {
      // the code here is called once the animation has completed
      // set the style to left 150%
      $(this).css('left', '150%');
      // put the box inside the element with id=container
      $(this).appendTo('#container');
    });

    // animate the element just next to the box element 
    // moving it left 50% taking 500 milliseconds to do it.
    $(this).next().animate({ left: '50%' }, 500);

  });

});

现在假设您必须使用setInterval和缓动函数编写动画代码，更不用说跨浏览器事件了。使这段代码变得更加冗长和复杂，你可能会做类似的事情。

代码仅限于纯Javascript;需要Jquery翻译

2 个答案: