jquery怎样设置才能做完上一步动画再执行下一步

比如$('pic1').hide(1000);
$('pic2').show(1000);
我的想法就是pic1完全消失以后再让pic2出现，但是现在它们两个几乎一起动画
HTML：
<body>
<img id="pic1" src="pics/1.jpg" width="570" height="340" alt="entrysite" title="1" />
<img id="pic2" src="pics/2.jpg" width="570" height="340" alt="entrysite" title="2" />
<img id="pic3" src="pics/3.jpg" width="570" height="340" alt="entrysite" title="3" />
<img id="pic4" src="pics/4.jpg" width="570" height="340" alt="entrysite" title="4" />
</body>
JS:
window.onload=initial;
function initial(){
$('#pic2').hide();
$('#pic3').hide();
$('#pic4').hide();
picShow(1,2);
}

function picShow(last,next){
lastname='#'+("pic"+last);//需要消失的图片的选择器
nextname='#'+("pic"+next);//需要显示的图片的选择器
$(lastname).hide(1000,function(){
last<4?$(nextname).show(1000,nextturn(next)):$('#pic1').show(1000,nextturn(next));
});
}

function nextturn(last){
last<4?picShow(last,last+1):picShow(last,1);
}
当网页开始时，第一个图片消失后，所有图片会一起出现，这是为什么？

举报该问题

推荐答案推荐于2018-02-25

$('pic1').hide(1000);
$('pic2').delay(1000).show(1000); delay(时间) 延时多少秒执行

<script src="jquery-1.7.1.min.js"></script>
<script language="javascript">
window.onload=initial;
function initial(){
$('#pic2').hide();
$('#pic3').hide();
$('#pic4').hide();
picShow(1,2);
}

function picShow(last,next){
lastname='#'+("pic"+last);//需要消失的图片的选择器
nextname='#'+("pic"+next);//需要显示的图片的选择器
// $(lastname).hide(1000,function(){
// last<4?$(nextname).show(1000,nextturn(next)):$('#pic1').show(1000,nextturn(next));
// });
$(lastname).hide(1000);
if(last<4)
{
$(nextname).delay(1000).show(1000);
setTimeout(function(){nextturn(next)},1000);
}
else
{
$('#pic1').delay(1000).show(1000);
setTimeout(function(){nextturn(next)},1000);
}
}

function nextturn(last){
last<4?picShow(last,last+1):picShow(last,1);
}
</script>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://22.wendadaohang.com/zd/0226XfShI.html

其他回答

第1个回答 2018-02-24

JS:

$(function(){
   $('#pic1').hide();
   $('#pic2').hide();
   $('#pic3').hide();
   $('#pic4').hide();
   function picShow(the){
      $("#pic"+(the+1)).hide(1000,function(){
         the=(the+1)%4;
         $("#pic"+(the+1)).show(1000,function(){
            picShow(the);
         });
      });
   };
   picShow(0);
});

第2个回答 2018-02-24

jquery有animate方法，可以做动画效果，并且按步骤执行的话，可以用回调函数callback。不过我一般会用move.js。
如果你找到move.js的话上面有实例，个人感觉很好用，做全屏滚动之类的都会用这个框架。做你想要的这个效果，so easy啊。

第3个回答 2011-12-17

$(selector).hide(speed,callback)
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。

应该是这个意思:
$('pic1').hide(1000,function(){
$('pic2').show(1000)
});

你试试吧，我没试呢，重装系统了，懒得下编辑器了。追问

问题有补充，麻烦解答一下

第4个回答 2011-12-17

用settimeout延时启动第二句代码追问

问题有补充，麻烦解答一下

相似回答

怎么样让前一个步骤执行完延时一下再执行下一步答：setTimeout(function(){},1000);例如方法： function test(){return 1;} 页面加载完毕事件： window.onload = function(){ setTimeout(test,1000);//1000毫秒=1秒后执行test方法 } 如果你使用jquery的话可以： $(window).load(function(){ setTimeout(test,1000);//1000毫秒=1...不需要使用j...

jQuery内置的几种动画样式答：让我们先来看看jQuery内置的几种动画样式：show / hide直接以无参数形式调用show()和hide()，会显示和隐藏DOM元素。但是，只要传递一个时间参数进去，就变成了动画：var p = $('#test-show-hide');p.hide(3000); // 在3秒钟内逐渐消失时间以毫秒为单位，但也可以是'slow'，'fast'这些字符串：...

大家正在搜

作业怎样才能快速做完做完人授躺多久才能走为什么做完手术不能睡觉做完人授需要注意什么做完滚针几天恢复做完人工授精后需要注意什么做完ct多久可以怀孕做完ct多久可以要孩子好传动画