想用jq做一个抽烟机不断把下面的烟雾连续不断往上抽的效果

想做一个抽烟机不断把下面的烟雾连续不断往上抽的效果，自己写了一下发现总会卡一下不知道为什么总会一卡一卡的往上走，不是连续的往上走，jq版本是jquery-1.10.1.min.js

<style>
.ipro_pic {width:308px; height:242px; position:relative;}
.ipro_pic .h1 img {width:308px; height:242px;}
.ipro_pic .h2 {width:308px; height:88px; overflow:hidden; position:absolute; bottom:0; left:0;}
.ipro_pic .h2 img {position:absolute; top:0px; left:-50px;}
</style>

<div class="ipro_pic">
  <div class="h1"><img src="images/cate1.jpg" /></div>
  <div class="h2"><img src="images/yanwu.png" /></div>
</div>

<script>
function yanwu()
{
    var div = $('.ipro_pic .h2 img');
    if(div.css("top")=="-284px")
    {
        div.css("top","0px");
        yanwu();
    }
    else
    {
        div.animate({top:'-284px'},1000,yanwu);
    }
}
yanwu();
</script>

附上图片：
图片说明

烟雾
图片说明

在做广告无缝轮播广告无缝轮播的时候，顺便修正了下你的代码，现在可以无缝抽油烟了：

 <html>
<head>
    <meta charset="utf-8"></media>
    <script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
<style>
.ipro_pic {width:308px; height:242px; position:relative;}
.ipro_pic .h1 img {width:308px; height:242px;}
.ipro_pic .h2 {width:308px; height:88px; overflow:hidden; position:absolute; bottom:0; left:0;}
.ipro_pic .h2 img {position:relative; top:0px; left:-50px;}
</style>

</head>
<body align="center">
    <div class="ipro_pic">
        <div class="h1"><img src="../img/cate1.jpg" /></div>
        <div class="h2">
            <ul id="ulID" style="list-style-type:none;position: relative;top: -16px;">
                <li><img src="../img/yanwu.png" id="img1"/></li>
                <li><img src="../img/yanwu.png" id="img2"/></li>
                <!-- <li><img src="yanwuHead.png" id="img3"/></li> -->
            </ul>
        </div>
    </div>

<script type="text/javascript">  

    var PlaceTop = parseInt($("#ulID").css("top"));
    function yanwu()
    {
        var ulID = $("#ulID");
        PlaceTop = --PlaceTop;
         if(PlaceTop ==-571)
        {
            PlaceTop=0;
        }
        if(PlaceTop < -571){
            alert("Eror!");
            clearInterval(int);
        }
        ulID.css("top",PlaceTop);   
    }
    int=setInterval("yanwu()",1);
</script>                       
</body>
</html>

用定时器实现一下看看，你这是递归实现的

总觉得是你的图片的问题，图片位置衔接有缝隙才会出现卡的现象。

    <div class="ipro_pic">
        <div class="h1"><img src="cate1.jpg" /></div>
        <div class="h2">
            <ul id="ulID" style="list-style-type:none;position: relative;top: -16px;">
                <li><img src="yanwu.png" id="img1"/></li>
                <li><img src="yanwu.png" id="img2"/ style="top: -3px;"></li>
            </ul>
        </div>
    </div>

<script type="text/javascript">  
    var ulID = $("#ulID");
    function yanwu()
    {
         if(ulID.css("top")=="-568px")
        {
            ulID.css("top","-16px");
        }
        ulID.stop().animate({top:'-568px'},1000);
    }
setInterval("yanwu()",1000);
</script>

你要在结束的时候放一张和开头一模一样的图片（大小是你那个可见div的高度和宽度，即88px），位置无缝重合，这样才不会有卡的现象。

    function yanwu()
    {
         if(ulID.css("top")=="-568px")
        {
            ulID.css("top","-1px");
            yanwu();
        }
        else
        {
            ulID.animate({top:'-568px'},3000,yanwu);
        }
    }
yanwu();