javascript - Jquery 仅在控制台内工作，即使已准备好文档

我正在做作业，我想弄清楚为什么我的 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 -->

最佳答案

看起来像你的情况

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>

以下是优势列表:

是DRY - 无需为每张图片重复相同的代码。您可以一次性完成编码。
对于所有图像，包括以后添加到 .pic 的 future 图像，它只在父级上绑定(bind)一次。，因为该事件绑定(bind)在父级上并且仅评估子级是否为 <img>当事件发生时。如果您有 1k 张图像，您仍然只需要绑定(bind)一次并且它会很轻，而使用您的方法则需要 1k 次绑定(bind)。
而不是使用 jQuery 的 .animate() ，这是出了名的慢且资源昂贵，它使用 CSS 动画。
而不是动画left (触发对后续元素的重绘)，它动画 transform ，它只会触发渲染层的更新——元素不会在 DOM 中移动。仅更新其在渲染层上的投影，不影响任何其他内容。
无需计算当前位置来确定是否需要以一种方式或另一种方式移动它，您只需使用元素上存在的类来控制方向，允许您在过渡期间转动动画，次数为您想要的，成本最低且无需位置计算。

注意:每当您想在页面中计算/定位图像时，最好将您的代码绑定(bind)到window.onload 上。事件(当所有同步资源完成加载时)而不是 DOM.ready (当 DOM 元素映射完成时 - 当解析器到达 </html> 标记时)。 ready在 onload 之前触发通常图像(尤其是大图像)尚未加载，浏览器不知道它们的实际大小 - 因此导致计算错误。

另一个注意事项:您应该始终尝试使用 CSS 执行您的动画，因为它们是最便宜的(资源明智的)。大多数时候，您将能够执行动画所需的一切 transform或 opacity这就是您应该追求的目标，因为它们是最便宜的动画属性之一。但是 CSS 动画确实有一个缺点:它们没有 complete/done打回来。一种在完成时执行操作或触发事件的方法。当需要链接动画时，您需要此回调，此时您应该求助于 JavaScript 动画库。当你这样做时，我的建议是选择 .velocity() 在 jQuery 的 .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>

我应该在这里记下网络动画的 future ，它兼顾了两全其美(JS 和 CSS):Web Animations API .像 CSS 一样轻巧，又不失 JS 的通用性。但是，它仍然缺少support在 IE 和 Safari 中，但两者的状态都是“正在考虑”。因此，在大约 2-3 年内，它可以在没有 polyfill 的生产环境中使用。

最后说明:您不需要 performance.now()或 log() s 在脚本中，它们只是在 document.ready 时向您展示和 window.load发生的情况以及在解析脚本时它们从中获取了多少。这是该脚本的简短版本:

$(window).on('load', () => {
  $('.pic').on('click tap', 'img', e => $(e.target).toggleClass('transformed'))
});

关于javascript - Jquery 仅在控制台内工作，即使已准备好文档，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50236205/

javascript - Jquery 仅在控制台内工作，即使已准备好文档

上一篇：javascript - 在 Bootstrap 4 中调整输入大小

下一篇：html - 创建一个 Angular 组件来显示一组 html 表格单元格以嵌入到其他表格中