Question

我正在关注图片滑块的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>

css for images

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

我希望在页面加载时将第一张图片淡化

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

但这不起作用。我检查过jquery文件也完全包含在我的源代码中。请有人帮帮我

Answer 1

图片代码<img>无法生成子代，因此> selector毫无意义。正确的代码是：

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

另一件事。尽管数字ID是有效的HTML5标识符，但最好还是坚持使用更传统的标识符，例如image-1，例如旧版浏览器：

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

Answer 2

尝试

<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);
  });

Answer 3

你必须使用object Form2: TForm2 Left = 0 Top = 0 Caption = 'Form2' ClientHeight = 478 ClientWidth = 674 Color = clBtnFace Font.Charset = DEFAULT_CHARSET Font.Color = clWindowText Font.Height = -13 Font.Name = 'Tahoma' Font.Style = [] OldCreateOrder = False OnCreate = FormCreate PixelsPerInch = 120 TextHeight = 16 object Panel1: TPanel Left = 0 Top = 193 Width = 249 Height = 285 Align = alLeft Caption = 'Panel1' TabOrder = 0 ExplicitTop = 0 ExplicitHeight = 478 end object Panel2: TPanel Left = 249 Top = 193 Width = 425 Height = 285 Align = alClient Caption = 'Panel2' TabOrder = 1 ExplicitTop = 0 ExplicitHeight = 478 end object Panel3: TPanel Left = 0 Top = 0 Width = 674 Height = 193 Align = alTop Caption = 'Panel3' TabOrder = 2 end end 这意味着当加载页面时，该功能将处于活动状态。您应该将代码放在此函数中。

$(document).ready(function () {...});

Jquery：fadein功能不起作用

3 个答案: