我正在做一项任务，我正在试图解释为什么我的jquery代码仅在我打开控制台时才起作用。关于这种行为的奇怪部分是它在Edge / IE中工作正常但不是chrome或firefox。我已经搜索了各种线程，并且我加倍检查我的doc ready功能是否正确格式化并加入了括号。编辑：添加了HTML和CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project 5: P3</title>
<meta name="author" content="Mia Kollia"><meta name="robots" content="noindex, nofollow">
<!-- STANDARD @IMPORT Google Font Gamja Flower -->
<link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
</head>
<body>
<aside class="logo">
<img src = "sftwear.png" alt="logo"><br>
</aside>
<aside class="Home">
<a href="../home.html">Home</a><br> <!-- Home link -->
</aside>
<article class="content">
<section class="intro">
<h1> Behold My Cats </h1>
</section>
<section class="pic">
<img class="image" src="pic2.jpg" height="200px" width="200px">
<img class="image" src="pic3.jpg" height="200px" width="200px">
<img class="image" src="pic4.jpg" height="200px" width="200px">
<img class="image" src="pic5.jpg" height="200px" width="200px">
</section>
<div id="savedspot"></div> <!-- used div here instead of p as I do not expect the viewer to see this -->
<p id="alertsection"></p>
<p id="alertsection2"></p> <!-- hidden until used by something -->
</article>
<style type="text/css">
body {
width:50em; /* Limits the space used by the document */
margin: auto;
text-align: center; /*aligns all text */
font-family: 'Gamja Flower', cursive;
}
article, aside >img{
background: linear-gradient(to bottom, #eab92d 0%,#c79810 100%);
border-radius: 1em;
}
.pic > img:nth-of-type(1){
position: relative;
display: block;
border-radius: 1em;
font-size: .8em;
padding: .5em;
margin: .5em;
color:black;
background: linear-gradient(to bottom, #4eacdb 0%,#1f96d1 50%,#007ebc 51%,#0084c5 100%) /* Tried to make a fancy gradient did not realllllly work */
}
.pic > img:nth-of-type(2){
position: relative;
display: block;
border-radius: 1em;
font-size: .8em;
padding: .5em;
margin: .5em;
color:black;
background: linear-gradient(to bottom, #4eacdb 0%,#1f96d1 50%,#007ebc 51%,#0084c5 100%) /* Tried to make a fancy gradient did not realllllly work */
}
.pic > img:nth-of-type(3){
position: relative;
display: block;
border-radius: 1em;
font-size: .8em;
padding: .5em;
margin: .5em;
color:black;
background: linear-gradient(to bottom, #4eacdb 0%,#1f96d1 50%,#007ebc 51%,#0084c5 100%) /* Tried to make a fancy gradient did not realllllly work */
}
.pic > img:nth-of-type(4){
position: relative;
display: block;
border-radius: 1em;
font-size: .8em;
padding: .5em;
margin: .5em;
color:black;
background: linear-gradient(to bottom, #4eacdb 0%,#1f96d1 50%,#007ebc 51%,#0084c5 100%) /* Tried to make a fancy gradient did not realllllly work */
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
"use strict";
$(document).ready(function() {
console.log("I'm ready!")
$(".pic > img:nth-of-type(1)").click(function(){
var imgPosition1 = $(this).position();
if (imgPosition1.left>=300) {
$(this).stop().animate({left: 1}, 3000);
}
else{
$(this).stop().animate({left: 300}, 3000);
}
console.log(imgPosition1)
});
$(".pic > img:nth-of-type(2)").click(function(){
var imgPosition2 = $(this).position();
if (imgPosition2.left>=300) {
$(this).stop().animate({left: 1}, 3000);
}
else {
$(this).stop().animate({left: 300}, 3000);
}
console.log(imgPosition2)
});
$(".pic > img:nth-of-type(3)").click(function(){
var imgPosition3 = $(this).position();
if (imgPosition3.left>=300) {
$(this).stop().animate({left: 1}, 3000);
}
else {
$(this).stop().animate({left: 300}, 3000);
}
console.log(imgPosition3)
});
$(".pic > img:nth-of-type(4)").click(function(){
var imgPosition4 = $(this).position();
if (imgPosition4.left>=300) {
$(this).stop().animate({left: 1}, 3000);
}
else {
$(this).stop().animate({left: 300}, 3000);
}
console.log(imgPosition4)
});
});
</script>
</body>
<!-- gallery code above -->
答案 0 :(得分：7)
看起来像你的情况
if ($(this).position().left>=300) {...}
true打开时，会返回console。动画确实发生了，但它从left:0到left: 1px超过3秒。无法注意到。
它的改进版本是：
"use strict";
let t0 = performance.now();
$(document).ready(console.log("Ready in " + (performance.now() - t0) + 'ms.'))
$(window).on('load', () => {
console.log("Loaded in " + (performance.now() - t0) + 'ms.');
$('.pic').on('click tap', 'img', e => {
$(e.target).toggleClass('transformed')
})
});@import('//fonts.googleapis.com/css?family=Gamja+Flower');
body {
margin: 0;
text-align: center;
font-family: 'Gamja Flower', cursive;
}
article,
aside>img {
background: linear-gradient(to bottom, #eab92d 0%, #c79810 100%);
border-radius: 1em;
}
.pic>img {
position: relative;
display: block;
border-radius: 1em;
font-size: .8em;
padding: .5em;
margin: .5em;
color: black;
background: linear-gradient(to bottom, #4eacdb 0%, #1f96d1 50%, #007ebc 51%, #0084c5 100%);
transition: transform 3s cubic-bezier(.4,0,.2,1);
transform: translateX(0);
}
.pic>img.transformed {
transform: translateX(300px);
}<script src="//code.jquery.com/jquery-latest.min.js"></script>
<aside class="logo">
<img src="//picsum.photos/100/100" alt="logo"><br>
</aside>
<aside class="Home">
<a href>Home</a><br>
</aside>
<article class="content">
<section class="intro">
<h1> Behold My Cats </h1>
</section>
<section class="pic">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
</section>
</article>
以下是一系列优势：
.pic的未来图像，因为事件绑定在父级上，并且只评估子级是否为<img>当事件发生时。如果您有1k图像，那么您仍然只能绑定一次并且它会很轻，而使用您的方法则需要1k绑定。.animate()，这是非常慢和资源昂贵，它使用CSS动画。 left（触发后续元素上的重绘），它会动画transform，它只触发渲染层上的更新 - 元素不会在DOM中移动。只有它的＆＃39;更新渲染层上的投影，而不会影响其他任何内容。注意：无论何时您想在页面中计算/定位图像，都希望在window.onload事件（当所有同步资源完成加载时）而非DOM.ready上绑定您的代码（当DOM元素映射完成时 - 解析器到达</html>标记时）。 ready在onload之前触发，并且通常图像（特别是如果很大）尚未加载且浏览器不知道它们的实际大小 - 因此导致错误的计算。
另一个注意事项：你应该总是尝试使用CSS来执行你的动画，因为它们是最便宜的（资源方面的）。大多数情况下，您将能够执行动画transform或opacity所需的一切，以及您应该瞄准的目标，因为它们是动画中最便宜的属性之一。但CSS动画确实有一个缺点：他们没有complete / done回调。一种在他们完成时执行操作或触发事件的方法。当需要链接动画时，你需要这个回调，当你应该转向JavaScript动画库时。当你这样做时，我的建议是选择.velocity()而不是jQuery＆＃39; .animate()。它非常值得开销。
$(window).on('load', () => {
$(".pic").on('click tap', '.image', function() {
$(this).velocity({
transform: $(this).position().left > 299.9 ?
"translateX(1px)":
"translateX(300px)"
}, {
duration: 1500,
easing: [ .42, 0, .2, 1 ]
});
});
});@import('https://fonts.googleapis.com/css?family=Gamja+Flower');
body {
width: 100%;
margin: 0;
text-align: center;
font-family: 'Gamja Flower', cursive;
}
article,
aside>img {
background: linear-gradient(to bottom, #eab92d 0%, #c79810 100%);
border-radius: 1em;
}
.image {
position: relative;
display: block;
border-radius: 1em;
font-size: .8em;
padding: .5em;
margin: .5em;
color: black;
background: linear-gradient(to bottom, #4eacdb 0%, #1f96d1 50%, #007ebc 51%, #0084c5 100%)
}<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/2.0.2/velocity.min.js"></script>
<aside class="logo">
<img src="//picsum.photos/80/80" alt="logo"><br>
</aside>
<aside class="Home">
<a href>Home</a><br>
<!-- Home link -->
</aside>
<article class="content">
<section class="intro">
<h1> Behold My Cats </h1>
</section>
<section class="pic">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
<img class="image" src="//picsum.photos/200/200" height="200px" width="200px">
</section>
</article>
我应该在这里注意网络动画的未来，它充分利用了两个世界（JS＆amp; CSS）：Web Animations API。像CSS一样轻巧，不失JS的多功能性。但是，它在IE和Safari中仍然缺少support，但两者的状态都是＆＃34;正在考虑＆＃34; 。因此，它可以在大约2 - 3年内在没有填充物的生产环境中使用。
最后注意事项：您不需要脚本中的performance.now()或log()，他们只会在document.ready和{{{{}}时显示给您1}}发生以及解析脚本时需要花多少钱。这是该脚本的简洁版本：
window.load