Question

我知道有很多关于此问题的其他帖子，但没有一个对我有用。我有一个div，我想用jquery淡入淡出。（我最初希望它在用户向下滚动时淡入，但这也不起作用，但如果有人也可以帮助我，那就太棒了！）

这是我的代码：

<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script>
  $(function() {
  $(".twitter-widget").fadeIn(5000);
});
</script>
<style>
  #twitter-widget {
    position: fixed;
    bottom: 15px;
    right: 30px;
  }
</style>
<div style="text-align: center;" id="twitter-widget">
<div style="Background-color: white; Width: 200px; Height: 100px;" class="content">
<style>
  .rhett-link, .chadtronic, .here-now, .htde {
    border-radius: 10px;
  }`
</style>
<a href="https://twitter.com/averybmiller" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @averybmiller</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<br>
Followed By
<br>
<a href="http://www.twitter.com/rhettandlink">
  <img src="https://pbs.twimg.com/profile_images/1617483791/RhettAndLink_Logo_RGB.jpg" height="40px" width="40px" alt="Rhett and Link" class="rhett-link"></a>
<a href="http://www.twitter.com/chadtronic">
  <img src="https://pbs.twimg.com/profile_images/642137361124454400/p4Aui6FS.png" height="40px" width="40px" alt="Chadtronic" class="chadtronic"></a>
<a href="http://www.twitter.com/hereandnow">
<img src="https://pbs.twimg.com/profile_images/378800000068124541/9fdeea271f46802d828b3b5a194df006.png" height="40px" width="40px" alt="NPR's Here and Now" class="here-now"></a>
<a href="http://www.twitter.com/htde">
<img src="https://pbs.twimg.com/profile_images/431891488675332096/DDbr4grY.png" height="40px" width="40px" alt="NPR's How to do Everything" class="htde"></a>
<br>
</div>
<div style="background-color: #FF5500; Width: 200px; Height: 2px"></div>
</div>

现在fadeIn。，或任何jquery的东西，这个问题，将无法正常工作。我无法弄清楚。有任何想法吗？

Answer 1

<style>必须在head标记<head></head>内写入，而且<style>标记在html中有两次不正确

你的twitter-widget是id而不是class，更改$(".twitter-widget").fadeIn(5000); 到$("#twitter-widget").fadeIn(5000);

$("#twitter-widget").fadeOut(3000).fadeIn(3000);

  #twitter-widget {
    position: fixed;
    bottom: 15px;
    right: 30px;
      
  }
  .rhett-link, .chadtronic, .here-now, .htde {
    border-radius: 10px;
  }`

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div style="text-align:center;" id="twitter-widget">
<div style="Background-color: white; Width: 200px; Height: 100px;" class="content">
<a href="https://twitter.com/averybmiller" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @averybmiller</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<br>
Followed By
<br>
<a href="http://www.twitter.com/rhettandlink">
  <img src="https://pbs.twimg.com/profile_images/1617483791/RhettAndLink_Logo_RGB.jpg" height="40px" width="40px" alt="Rhett and Link" class="rhett-link"></a>
<a href="http://www.twitter.com/chadtronic">
  <img src="https://pbs.twimg.com/profile_images/642137361124454400/p4Aui6FS.png" height="40px" width="40px" alt="Chadtronic" class="chadtronic"></a>
<a href="http://www.twitter.com/hereandnow">
<img src="https://pbs.twimg.com/profile_images/378800000068124541/9fdeea271f46802d828b3b5a194df006.png" height="40px" width="40px" alt="NPR's Here and Now" class="here-now"></a>
<a href="http://www.twitter.com/htde">
<img src="https://pbs.twimg.com/profile_images/431891488675332096/DDbr4grY.png" height="40px" width="40px" alt="NPR's How to do Everything" class="htde"></a>
<br>
</div>
<div style="background-color: #FF5500; Width: 200px; Height: 2px"></div>
</div>

jQuery .fadeIn（和所有jQuery）不工作

1 个答案: