1

次の問題があります。

準備ができているのではなく、クリックでアニメーションを開始したい....readyに設定されている場合は機能しますが、.clickに設定されている場合は機能しません

$('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>

そしてここにCSS:

div.main {
  position: relative;
  z-index: 2;
  width: 300px;
  height: 300px;
  margin: 0px auto;
  top: 50%;
  margin-top: -150px;
  background-color: #eee;
}

div.sub {
  position: absolute;
  z-index: 1;
  top: 75px;
  left: 75px;
  width: 150px;
  height: 150px;
  background-color: rgba(0,0,0,0.5);
  -webkit-transition: all 0.3s ease-in-out;
}
4

2 に答える 2

2

それらをドキュメント準備機能内に含める必要があります。

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

ワーキングデモ

于 2013-01-20T11:07:09.207 に答える
1

コードをdom 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);
 });
});

問題は、js の実行時に div が存在しないことです。すべての要素の準備が整うと、dom ready 関数が呼び出されます。

http://api.jquery.com/ready/を参照してください

于 2013-01-20T11:01:10.373 に答える