jQuery无法生成。请单击以处理此代码

jQuery无法生成。请单击以处理此代码,jquery,css,animation,click,ready,Jquery,Css,Animation,Click,Ready,我有以下问题: 我想动画开始时点击安装的准备。。。它在设置为打开时工作。准备就绪,但在打开时不工作。单击 $('div.main').ready(function() { setTimeout("$('div#tl').css({'top' : '-175px', 'left' : '-175px'})", 100); setTimeout("$('div#t').css({'top' : '-175px'})", 300); setTimeout("$('div#tr').css(

我有以下问题:

我想动画开始时点击安装的准备。。。它在设置为打开时工作。准备就绪,但在打开时不工作。单击

$('div.main').ready(function() {
  setTimeout("$('div#tl').css({'top' : '-175px', 'left' : '-175px'})", 100);
  setTimeout("$('div#t').css({'top' : '-175px'})", 300);
  setTimeout("$('div#tr').css({'top' : '-175px', 'left' : '325px'})", 500);
  setTimeout("$('div#r').css({'left' : '325px'})", 700);
  setTimeout("$('div#br').css({'top' : '325px', 'left' : '325px'})", 900);
  setTimeout("$('div#b').css({'top' : '325px'})", 1100);
  setTimeout("$('div#bl').css({'top' : '325px', 'left' : '-175px'})", 1300);
  setTimeout("$('div#l').css({'left' : '-175px'})", 1500);
});
以下是HTML:

<div class="main">
    <div class="sub" id="tl"></div>
    <div class="sub" id="t"></div>
    <div class="sub" id="tr"></div>
    <div class="sub" id="r"></div>
    <div class="sub" id="br"></div>
    <div class="sub" id="b"></div>
    <div class="sub" id="bl"></div>
    <div class="sub" id="l"></div>
</div>

您只需将代码放入一个dom就绪函数中

$(function() {
 $('div.main').click(function() {
   setTimeout("$('div#tl').css({'top' : '-175px', 'left' : '-175px'})", 100);
   setTimeout("$('div#t').css({'top' : '-175px'})", 300);
   setTimeout("$('div#tr').css({'top' : '-175px', 'left' : '325px'})", 500);
   setTimeout("$('div#r').css({'left' : '325px'})", 700);
   setTimeout("$('div#br').css({'top' : '325px', 'left' : '325px'})", 900);
   setTimeout("$('div#b').css({'top' : '325px'})", 1100);
   setTimeout("$('div#bl').css({'top' : '325px', 'left' : '-175px'})", 1300);
   setTimeout("$('div#l').css({'left' : '-175px'})", 1500);
 });
});
问题是在执行js时,div不存在。当所有元素就绪时,将调用dom就绪函数


请参见

您应该将它们包括在文档准备功能中

$(document).ready(function() {
 $('div.main').click(function() {
  setTimeout("$('div#tl').css({'top' : '-175px', 'left' : '-175px'})", 100);
  setTimeout("$('div#t').css({'top' : '-175px'})", 300);
  setTimeout("$('div#tr').css({'top' : '-175px', 'left' : '325px'})", 500);
  setTimeout("$('div#r').css({'left' : '325px'})", 700);
  setTimeout("$('div#br').css({'top' : '325px', 'left' : '325px'})", 900);
  setTimeout("$('div#b').css({'top' : '325px'})", 1100);
  setTimeout("$('div#bl').css({'top' : '325px', 'left' : '-175px'})", 1300);
  setTimeout("$('div#l').css({'left' : '-175px'})", 1500);
});
    });

请将函数传递给
setTimeout
,而不是字符串(尽管这不应该是问题所在)。显然,您还没有完全理解
ready
事件处理程序的用途。请看一看这本书。这里很好地解释了您想要做什么(设置单击处理程序)。css方法
top:50%
在相对位置上不起作用element@YusafKhaliq它确实有效:Dno probs;)我不想仅仅因为修好了一点CSSY而受到表扬,你应该真正地将函数传递给
setTimeout
,而不是字符串<代码>评估是邪恶的!
$(document).ready(function() {
 $('div.main').click(function() {
  setTimeout("$('div#tl').css({'top' : '-175px', 'left' : '-175px'})", 100);
  setTimeout("$('div#t').css({'top' : '-175px'})", 300);
  setTimeout("$('div#tr').css({'top' : '-175px', 'left' : '325px'})", 500);
  setTimeout("$('div#r').css({'left' : '325px'})", 700);
  setTimeout("$('div#br').css({'top' : '325px', 'left' : '325px'})", 900);
  setTimeout("$('div#b').css({'top' : '325px'})", 1100);
  setTimeout("$('div#bl').css({'top' : '325px', 'left' : '-175px'})", 1300);
  setTimeout("$('div#l').css({'left' : '-175px'})", 1500);
});
    });