Jquery animate代码执了，却没效果

Question

代码如下
  function Start(time) {
                  if (options.end) {
                      $("#backgroundimage0").stop(true, true);
                      $("#backgroundimage1").stop(true, true);
                      deletecount();
                      var $up = $("#backgroundimage0").attr("src", "pictures/" + options.count + ".jpg");
                      changecount();
                      var $down = $("#backgroundimage1").attr("src", "pictures/" + options.count + ".jpg");
                      options.end = false;
                      move(time, $up, $down);
                  }
                  else {
                      $("#backgroundimage0").stop(true, true);
                      $("#backgroundimage1").stop(true, true);
                      options.end = true;
                  }
              }
是一个点击一次开始播放图片，再点一下暂停，再点一下继续播放的功能
调用的move函数如下
 function move(time, $up, $down) {
                  $up.animate({ opacity: "0" }, 750, function() {
                      $up.attr("style", "z-index:-1");
                      $down.attr("style", "z-index:0");
                      changecount();
                      $up.attr("src", pictureurl(options.count));
                  });
                  $up.animate({ opacity: "1" }, 0, function() {
                      window.setTimeout(function() {
                          if (options.end) return;
                          move(time, $down, $up);
                      }, time);
                  });
              }
我发现，每次暂停后，再点击播放， function Start(time) {会运行，也会调用move，move的 $up.animate({ opacity: "0" }, 750, function() {。等动画代码也会运行，但是就是没效果而是直接
我用jquery不是很长，代码有错吗？

Answer 1

 //一共5步骤
        //1,将up层逐渐fadeout，让down层浮现出来
        //2,up与down层Z-index互换，将up置于down以下
        //3,将up url更新
        //4,将up opacity值从0换为1
        //5,将up与down对象互换，迭代        //存储数组，用于缓存加载的照片，第一次加载后，就不必再加载
        var pictureArray = new Array();
        var options = {
            nofirst: false,
            end: true,
            count: 1
        };
              
              for (var i = 0; i <= 3; i++) {
                 pictureArray[i] = new Image();
              }
              //主要处理图片url问题，在第一轮时，由于图片还在加载，直接采用url返回，之后arraylist有缓存，所以直接用缓存。
              function pictureurl() {
                  if (options.nofirst) {
                      return pictureArray[options.count].src;
                  }
                  else {
                      var url = "pictures/" + options.count + ".jpg";
                      //缓存图片
                      pictureArray[options.count].src = url;
                      return url;
                  }
              }
              function changecount() {
                  //更新count，既是当前应该展示的图片
                  if (options.count == 3) {
                      options.count = 0;
                      options.nofirst = true;
                  }
                  else
                      options.count++;
              }
              function deletecount() {
                  if (options.count == 0) {
                      options.count = 3;
                  }
                  else
                      options.count--;
              }
              $(window).load(function() {
                  //缓存图片
                  $("#backgroundimage1").attr("src", "pictures/1.jpg");
                  pictureArray[0].src = $("#backgroundimage0").attr("src");
                  pictureArray[1].src = $("#backgroundimage1").attr("src");
              });
              function move(time, $up, $down) {
               //动画主体
                  $up.animate({ opacity: "0" }, 750, function() {
                      $up.attr("style", "z-index:-1");
                      $down.attr("style", "z-index:0");
                      changecount();
                      $up.attr("src", pictureurl(options.count));
                  });
                  $up.animate({ opacity: "1" }, 0, function() {
                      window.setTimeout(function() {
                          if (options.end) return;
                          move(time, $down, $up);
                      }, time);
                  });
              }
            //相当于toggle
              function Start(time) {
                  if (options.end) {
                      $("#backgroundimage0").stop(true, true);
                      $("#backgroundimage1").stop(true, true);
                      deletecount();
                      var $up = $("#backgroundimage0").attr("src", "pictures/" + options.count + ".jpg");
                      changecount();
                      var $down = $("#backgroundimage1").attr("src", "pictures/" + options.count + ".jpg");
                      options.end = false;
                      move(time, $up, $down);
                  }
                  else {
                      $("#backgroundimage0").stop(true, true);
                      $("#backgroundimage1").stop(true, true);
                      options.end = true;
                  }
              }

Answer 2

html的呢？只有js没有html结构？让我们猜？

Answer 3

用了20分钟把lz的环境模拟出来了..悲剧.怎么不都贴出来没有发现lz所说的问题. 我的jq是1.4.2, 不知是否与版本有关?另请lz设定style时不要用.attr, 用.css来设定

Answer 4

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Css/StyleSheet.css" type="text/css" rel="Stylesheet" media="all" />
    <script type="text/javascript" language="javascript" src="Jquery/jquery-1.3.2.js"></script>
    <script type="text/javascript" language="javascript">
        //一共5步骤
        //1,将up层逐渐fadeout，让down层浮现出来
        //2,up与down层Z-index互换，将up置于down以下
        //3,将up url更新
        //4,将up opacity值从0换为1
        //5,将up与down对象互换，迭代        //存储数组，用于缓存加载的照片，第一次加载后，就不必再加载
        var pictureArray = new Array();
        var options = {
            nofirst: false,
            end: true,
            count: 1
        };
              
              for (var i = 0; i <= 3; i++) {
                 pictureArray[i] = new Image();
              }
              //主要处理图片url问题，在第一轮时，由于图片还在加载，直接采用url返回，之后arraylist有缓存，所以直接用缓存。
              function pictureurl() {
                  if (options.nofirst) {
                      return pictureArray[options.count].src;
                  }
                  else {
                      var url = "pictures/" + options.count + ".jpg";
                      //缓存图片
                      pictureArray[options.count].src = url;
                      return url;
                  }
              }
              function changecount() {
                  //更新count，既是当前应该展示的图片
                  if (options.count == 3) {
                      options.count = 0;
                      options.nofirst = true;
                  }
                  else
                      options.count++;
              }
              function deletecount() {
                  if (options.count == 0) {
                      options.count = 3;
                  }
                  else
                      options.count--;
              }
              $(window).load(function() {
                  //缓存图片
                  $("#backgroundimage1").attr("src", "pictures/1.jpg");
                  pictureArray[0].src = $("#backgroundimage0").attr("src");
                  pictureArray[1].src = $("#backgroundimage1").attr("src");
              });
              function move(time, $up, $down) {
                  $up.animate({ opacity: "0" }, 750, function() {
                      $up.attr("style", "z-index:-1");
                      $down.attr("style", "z-index:0");
                      changecount();
                      $up.attr("src", pictureurl(options.count));
                  });
                  $up.animate({ opacity: "1" }, 0, function() {
                      window.setTimeout(function() {
                          if (options.end) return;
                          move(time, $down, $up);
                      }, time);
                  });
              }              function Start(time) {
                  if (options.end) {
                      $("#backgroundimage0").stop(true, true);
                      $("#backgroundimage1").stop(true, true);
                      deletecount();
                      var $up = $("#backgroundimage0").attr("src", "pictures/" + options.count + ".jpg");
                      changecount();
                      var $down = $("#backgroundimage1").attr("src", "pictures/" + options.count + ".jpg");
                      options.end = false;
                      move(time, $up, $down);
                  }
                  else {
                      $("#backgroundimage0").stop(true, true);
                      $("#backgroundimage1").stop(true, true);
                      options.end = true;
                  }
              }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <img alt="" src="pictures/0.jpg" id="backgroundimage0"/>
    <img alt="" src="pictures/1.jpg" id="backgroundimage1"/>
    <div id="mainpage">
        <div id="left">
            <ul>
               <li><h4>
                   hello world</h4></li>
               <li><h4>I'm Suriyel</h4></li>
            </ul>
        </div>
        <div id="mainbody">
            <ul>
               <li><h4>Try This</h4></li>
               <li><h4>Try this world</h4></li>
            </ul>
        </div>
        <div id="right">
            <ul>
              <li>
                <h4>Don't believe this thing</h4>
              </li>
              <li>
                <h4>I'm Don't belive this</h4>
                <input type="button" id="button" value="clickme" onclick="move('2000',$('#backgroundimage0'),$('#backgroundimage1'))"/>
              </li>
              <li>
                <input type="button" id="stop" value="stop" onclick="Start('3000')" />
              </li>
            </ul>
        </div>
    </div>
    </form>
</body>
</html>

Answer 5

不会吧确实有运行了，不执行的情况
只要点了stop，再play，就会直接跳到下一张，运行一周期后，就在1，2两张之间跳，不执行0，3的动画好纠结额

Answer 6

CSS也贴了吧body {
}
#left
{
width:200px;
float:left;
z-index:1;
}
#mainbody
{
width:600px;
float:left;
z-index:1;
}
#right
{
width:200px;
float:left;
z-index:1;
}
#mainpage
{
width:1280px;
position:absolute;
left:50%;
margin-left:-640px;
z-index:1;
}
#backgroundimage0
{
width:1280px;
height:960px;
position:absolute;
left:50%;
margin-left:-640px;
z-index:0;
}
#backgroundimage1
{
width:1280px;
height:960px;
position:absolute;
left:50%;
margin-left:-640px;
z-index:-1;
}我只是试着做下幻灯片效果所以极不规范，见谅额~~

Answer 7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript">
//<![CDATA[
var sdemo={list:['pictures/0.jpg','pictures/1.jpg','pictures/2.jpg','pictures/3.jpg'],index:1,play:0}
var timer;
function foo(){
sdemo.index++;
sdemo.play=1;
if(sdemo.index>=sdemo.list.length){sdemo.index=0}
var s1=(sdemo.index)%2;
var s2=(s1==0)?1:0;
var d1=$('#backgroundimage'+s1)
var d2=$('#backgroundimage'+s2)
d1.animate({opacity: "0"},750,function(){
d2.css({"z-index":"1"});
d1.css({"z-index":"0","opacity":"1"}).attr("src",sdemo.list[sdemo.index]);
});
}
function dofoo(){
if(sdemo.play){
clearInterval(timer);
sdemo.play=0;
}else{
foo();
//这个时间一定要大于上面的750,加入想要图片变换间隔为1秒，则为1000+750=1750，2秒为2000+750=2750
timer=setInterval("foo()",1750)
}
}
$(function(){
$('#btndemo').click(function(){
dofoo();
});
});
//]]>
</script>
<style type="text/css">
#root {position:relative}
#demo {position:relative; display:block; height:200px;}
#demo img {position:absolute; top:0; left:0; z-index:0}
</style>
</head><body id="root">
<div id="demo">
<img alt="" src="pictures/0.jpg" id="backgroundimage0" style="z-index:1" />
<img alt="" src="pictures/1.jpg" id="backgroundimage1" />
</div>
<button id="btndemo">button</button>
</body>
</html>

Answer 8

这个应该不会，那楼主把animate的定义最简单的必然只是让其移动，只要简单的效果试试，可以不可以，如果可以的话，那么复杂的也一定可以，应该是参数的问题

Answer 9

十分感谢，分就给你了。我再看看原来那些错了
还有额，直接用list存图片的src，用httpcatch查看还是会每换一张图片，就加载一次，对此我做了一点小改动，用一个数组存image，再调用就不会再加载了
    <script type="text/javascript" language="javascript">
        var pictureArray = new Array();
        var option = { play: false, index: 1 };
        var timer;
        for (var i = 0; i <= 3; i++) {
            pictureArray[i] = new Image();
            pictureArray[i].src = "pictures/" + i + ".jpg";        }
        function Start() {
            if (option.play) {
                clearInterval(timer);
                option.play = false;
            }
            else {
                play();
                timer = setInterval("play()", 1750);
            }
        }
        function play() {
            option.play = true;
            option.index++;
            if (option.index >= 4) option.index = 0;
            var up = option.index % 2;
            var down = (up == 0) ? 1 : 0;
            var $up = $("#backgroundimage" + up);
            var $down = $("#backgroundimage" + down);
            $up.animate({opacity: "0"},750,function(){
               $down.css({"z-index":"1"});
               $up.css({"z-index":"0","opacity":"1"}).attr("src",pictureArray[option.index].src);
               });
        }
    </script>

Answer 10

我在想是不是windows.setTimeout和迭代导致动画序列出了问题。才疏学浅，还不明其中原理