Question

也许这看起来非常基本。对不起，我不知道为什么这段代码没有编译。我需要提一下我对jQuery很新。我尝试使用第二个$("document")来使用div“content”的id，但这两个都不起作用。

你能帮我解决一下吗？非常感谢！

<!DOCTYPE html>
<html>

<head>
    <title>Using jQuery Animations</title>
    <link rel="stylesheet" href="../style.css" />
    <script type="text/javascript" src="../jquery-3.0.0.js"></script>
    <script type="text/javascript">

        $("document").ready(function() {
            $( "document" ).scroll(function() {

                $("#background")
                .animate({left: 20, top:10}, 1000)
                $("#brackets")
                .animate({left: 20, top:10}, 1000)

        });
     });   

    </script>
    <style>
        #content {position: relative;}
        #background {
            background: #333;
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            width: 450px;
            height: 400px;

        }

         #brackets {
            background: transparent;
            border: 3px solid #000;
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            width: 450px;
            height: 400px;
            left: 50px;
        }
    </style>


</head>

<body style="height:100px; padding-top:400px;">

    <div id="content">
        <div id="background"></div>
        <div id="brackets"></div>
    </div>
</body>

</html>

Answer 1

尝试更换：

$( "document" ).scroll(function() {

使用：

$(window).on('scroll', function() {

Answer 2

不要将"document"的选择器传递给jQuery DOM selector function，而是使用window对象：

$( window ).scroll(function() {

见下文演示：

＆＃13;

$("document").ready(function() {
  $(window).scroll(function() {
    $('#console').append("scrolling<br />")
    $("#background")
      .animate({
        left: 20,
        top: 10
      }, 1000)
    $("#brackets")
      .animate({
        left: 20,
        top: 10
      }, 1000)

  });
});

＆＃13;

#content {
  position: relative;
}

#background {
  background: #333;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  width: 450px;
  height: 400px;
}

#brackets {
  background: transparent;
  border: 3px solid #000;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  width: 450px;
  height: 400px;
  left: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div id="background"></div>
  <div id="brackets"></div>
</div>
<div id="console"></div>

＆＃13;

JQuery滚动运动图像

2 个答案: