Jquery:淡出功能不起作用

Jquery : fadein function not working

本文关键字：不起作用 功能 淡出 Jquery      更新时间：2023-09-26

我正在跟随jquery视频教程的图像滑块。这是我在html

中的内容
   <div id="slider">
     <img id="1" src="images/1.jpg" alt="" > 
     <img id="2" src="images/2.jpg" alt="" /> 
     <img id="3" src="images/3.jpg" alt=""/>
     <img id="4" src="images/4.jpg" alt=""/>
   </div>


#slider >img{
    width: 960px;
    height: 300px;
    display: none;
    float: left;
 }

我想在页面加载时淡入第一个图像

$(function(){
      $("#slider>img>#1").fadeIn(3000);
  });

，但这不起作用。我确实检查了jquery文件也包含在我的源代码中。有人能帮我一下吗?

图像标记<img>不能有子，因此>选择器没有意义。正确的代码应该是:

$("#slider>img#1").fadeIn(3000);

另一回事。尽管数字id是有效的HTML5标识符，但最好还是坚持使用更传统的标识符，比如传统浏览器的image-1:

<img id="image-1" src="images/1.jpg" alt="" >

Try

<div id="slider">
     <img id="img1" src="images/1.jpg" alt="" > 
     <img id="img2" src="images/2.jpg" alt="" /> 
     <img id="img3" src="images/3.jpg" alt=""/>
     <img id="img4" src="images/4.jpg" alt=""/>
   </div>
$(function(){
      $("#img1").fadeIn(3000);
  });

您必须使用$(document).ready(function () {...});这意味着当页面被加载时，该函数将处于活动状态。你应该把你的代码放在这个函数中。

$(document).ready(function(){
  $("#slider>img>#1").fadeIn(3000);
});
相关文章：