Question

我已经在jsFiddle编写了一个网站代码，但是当我尝试将其移植到Dreamweaver时，我的jQuery函数无法正常工作。

＆＃13;

$(document).ready(function () {
  $("img.img").animate({
    opacity: 0.5
  });
});

$("#Musk").hover(function () {
  $("#Musk").animate({
    opacity: 1.0
  });
}, function () {
  $("#Musk").animate({
    opacity: 0.5
  });
});

$("#Branson").hover(function () {
  $("#Branson").animate({
    opacity: 1.0
  });
}, function () {
  $("#Branson").animate({
    opacity: 0.5
  });
});

$("#Lee").hover(function () {
  $("#Lee").animate({
    opacity: 1.0
  });
}, function () {
  $("#Lee").animate({
    opacity: 0.5
  });
});

$("#Tyson").hover(function () {
  $("#Tyson").animate({
    opacity: 1.0
  });
}, function () {
  $("#Tyson").animate({
    opacity: 0.5
  });
});

$("#Hadfield").hover(function () {
  $("#Hadfield").animate({
    opacity: 1.0
  });
}, function () {
  $("#Hadfield").animate({
    opacity: 0.5
  });
});

＆＃13;

@charset "UTF-8";
/* CSS Document */

body {
  background-color: #00008B;
}
#header {
  color: #FFFFFF;
  font-family: helvetica;
}
#p1 {
  font-family: helvetica;
  color:#FFFFFF;
  font-size: 12px;
}
#list {
  font-family: helvetica;
  color: #FFFFFF;
}

＆＃13;

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <script src="jquery-2.1.1.js"></script>

    <script src="ØvingJS.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="Øving6CSS.css">
  </head>

  <body>
    <body>
      <h1 id="header">Inspirerende personer</h1>

      <p id="p1">For eksempelet har jeg valgt å droppe å inkludere kildene. Kildene kan dog finnes i bildebeskrivelsen img src: For eksempelet er også bildene justert på, eventuelt også blåst opp.</p>


      <ul id="list">

        <li>Elon Musk.</li>
        <img class="img" id="Musk" src="http://static3.businessinsider.com/image/5228cef96bb3f7b10c8b457c/youre-not-going-to-want-to-miss-elon-musk-at-ignition.jpg" width="50%" height="50%"/>

        <p>Lorem Ipsum Elon Musk</p>


        <li>Richard Branson.</li>
        <img class="img" id="Branson" src="http://www.lockhart-meyer.co.uk/wp-content/uploads/2013/09/richard-branson-600x452.jpg" width="50%" height="50%"/>

        <p>Lorem Ipsum Richard Branson</p>


        <li>Tim Berners Lee</li>
        <img class="img" id="Lee" src="http://www.boxmedianews.com/wp-content/uploads/2014/03/dd9e1394620451_111654883-600x335-250x200.jpg" width="50%" height="50%"/>

        <p>Lorem Ipsum Tim Berners Lee</p>


        <li>Neil deGrasse Tyson</li>
        <img class="img" id="Tyson" style="-webkit-user-select: none" src="http://krnb.com/sean-andre/wp-content/uploads/sites/6/2014/06/neil-degrasse-tyson-600x349.jpg" width="50%" height="50%"/>

        <p>Lorem Ipsum Neil deGrasse Tyson</p>


        <li>Chris Hadfield</li>
        <img class="img" id="Hadfield" src="http://blog.hawkone.ca/wp-content/uploads/2014/02/hadfield-600x403.jpg" width="50%" height="50%"/>

        <p>Lorem Ipsum Chris Hadfield</p>


      </ul>
    </body>
  </body>
</html>

＆＃13;

当我使用jQuery版本2.x（边缘）而没有选中任何框并且使用onLoad设置时，animate功能在jsFiddle中工作。

如何将工作文件从jsFiddle移植到可在Dreamweaver上运行的工作版本？

Answer 1

我觉得这可能是一个问题。将所有内容保留在$(document).ready()函数中。因此，请将代码更改为：

$(document).ready(function () {
  $("img.img").animate({
    opacity: 0.5
  });


  $("#Musk").hover(function () {
    $("#Musk").animate({
      opacity: 1.0
    });
  }, function () {
    $("#Musk").animate({
      opacity: 0.5
    });
  });

  $("#Branson").hover(function () {
    $("#Branson").animate({
      opacity: 1.0
    });
  }, function () {
    $("#Branson").animate({
      opacity: 0.5
    });
  });

  $("#Lee").hover(function () {
    $("#Lee").animate({
      opacity: 1.0
    });
  }, function () {
    $("#Lee").animate({
      opacity: 0.5
    });
  });

});

Answer 2

如果它在负载下工作，请将其置于负载状态。

所以从 $（document）.ready（function（）使它成为 $（window）.load（function（）并且它将起作用：）

$(window).load(function() {
  $("img.img").animate({
    opacity: 0.5
  });


  $("#Musk").hover(function() {
    $("#Musk").animate({
      opacity: 1.0
    });
  }, function() {
    $("#Musk").animate({
      opacity: 0.5
    });
  });

  $("#Branson").hover(function() {
    $("#Branson").animate({
      opacity: 1.0
    });
  }, function() {
    $("#Branson").animate({
      opacity: 0.5
    });
  });

  $("#Lee").hover(function() {
    $("#Lee").animate({
      opacity: 1.0
    });
  }, function() {
    $("#Lee").animate({
      opacity: 0.5
    });
  });

  $("#Tyson").hover(function() {
    $("#Tyson").animate({
      opacity: 1.0
    });
  }, function() {
    $("#Tyson").animate({
      opacity: 0.5
    });
  });

  $("#Hadfield").hover(function() {
    $("#Hadfield").animate({
      opacity: 1.0
    });
  }, function() {
    $("#Hadfield").animate({
      opacity: 0.5
    });
  });
});

@charset "UTF-8";

/* CSS Document */

body {
  background-color: #00008B;
}
#header {
  color: #FFFFFF;
  font-family: helvetica;
}
#p1 {
  font-family: helvetica;
  color: #FFFFFF;
  font-size: 12px;
}
#list {
  font-family: helvetica;
  color: #FFFFFF;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="ØvingJS.js"></script>

  <link rel="stylesheet" type="text/css" href="Øving6CSS.css">
</head>

<body>

  <body>
    <h1 id="header">Inspirerende personer</h1>

    <p id="p1">For eksempelet har jeg valgt å droppe å inkludere kildene. Kildene kan dog finnes i bildebeskrivelsen img src: For eksempelet er også bildene justert på, eventuelt også blåst opp.</p>


    <ul id="list">

      <li>Elon Musk.</li>
      <img class="img" id="Musk" src="http://static3.businessinsider.com/image/5228cef96bb3f7b10c8b457c/youre-not-going-to-want-to-miss-elon-musk-at-ignition.jpg" width="50%" height="50%" />

      <p>Lorem Ipsum Elon Musk</p>


      <li>Richard Branson.</li>
      <img class="img" id="Branson" src="http://www.lockhart-meyer.co.uk/wp-content/uploads/2013/09/richard-branson-600x452.jpg" width="50%" height="50%" />

      <p>Lorem Ipsum Richard Branson</p>


      <li>Tim Berners Lee</li>
      <img class="img" id="Lee" src="http://www.boxmedianews.com/wp-content/uploads/2014/03/dd9e1394620451_111654883-600x335-250x200.jpg" width="50%" height="50%" />

      <p>Lorem Ipsum Tim Berners Lee</p>


      <li>Neil deGrasse Tyson</li>
      <img class="img" id="Tyson" style="-webkit-user-select: none" src="http://krnb.com/sean-andre/wp-content/uploads/sites/6/2014/06/neil-degrasse-tyson-600x349.jpg" width="50%" height="50%" />

      <p>Lorem Ipsum Neil deGrasse Tyson</p>


      <li>Chris Hadfield</li>
      <img class="img" id="Hadfield" src="http://blog.hawkone.ca/wp-content/uploads/2014/02/hadfield-600x403.jpg" width="50%" height="50%" />

      <p>Lorem Ipsum Chris Hadfield</p>


    </ul>
  </body>
</body>

</html>

Answer 3

jQuery是一个非常强大的JavaScript库，但似乎你正在使用一种更复杂的方式来为你的悬停状态获得一些很酷的效果。使用CSS3可以很容易地实现这一点：

#Lee{
    opacity: .5;
    -webkit-transition: all .32s ease-in-out;
    -moz-transition: all .32s ease-in-out;
    -ms-transition: all .32s ease-in-out;
    -o-transition: all .32s ease-in-out;
    transition: all .32s ease-in-out;


}

#Lee:hover{
    opacity:1;
    -webkit-transition: all .32s ease-in-out;
    -moz-transition: all .32s ease-in-out;
    -ms-transition: all .32s ease-in-out;
    -o-transition: all .32s ease-in-out;
    transition: all .32s ease-in-out;

}

在jQuery中动画不透明度。最初用jsFiddle编写

3 个答案: