日期:2014-05-16  浏览次数:20281 次

jquery setInterva 求指点,hover执行,mouseout终止。求指点
就是想鼠标移上去就每500毫秒移动,mouseout时终止。 求指点,

我写的好像实现不了,求指点
JScript code


$(document).ready(function() {
 $(".aa").hover(
    function() {
        picTimer = setInterval(function() 
        {showPic();},500); //此3000代表自动播放的间隔,单位:毫秒
    }
    ,function(){
        clearInterval(picTimer);
    }
               ).trigger("mouseleave");



    function showPic() { 
        $(".div1").animate({"left":"300"},500);
     }

    
    
}); 





CSS code

.divaa{ width:300px; height:250px; background:#FFCC99}
.div1{ position:absolute; top:0px; left:400px;}




HTML code


<a href="#" class="aa">click me</a>
<div class="div1 divaa">1</div>



------解决方案--------------------
$(".div1").animate({"left": parseInt($(".div1").css('left')) - 10}, 500);
------解决方案--------------------
移动了,mouseout怎么办?
楼主看看

HTML code

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>    
        <style>
            div {
                width:40px; height:40px; border:1px solid red;
            }
        </style>        
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="a"></div>
        <button id="btn">动画/停止</button>
        <script>
            var timer;
            var a = $('#a');
            $('#btn').click(function(){
                if(timer){
                    clearInterval(timer);
                    timer = null;
                    return;
                }
                clearInterval(timer);
                timer = setInterval(function(){
                    a.animate({
                        marginLeft: parseInt(a.css('marginLeft')) + 11
                    })
                }, 500)
            })
        </script>
    </body>
</html>