使用JQuery动画2个单独的项目并在鼠标悬停时暂停

时间:2011-10-22 01:13:52

标签: jquery

http://nerotic.net/auxout/

我对这个问题一直不太满意。在地图上,我有一系列点,分配了两个动作:

onmouseover : pops up a tooltip
click: changes the content in the panel on the right

页面设置为自动播放填充左侧面板的项目。

我想做的是让相应的工具提示与左侧面板一致突出显示。

然后,当用户将鼠标悬停在地图上的任何点上时,我希望两者完全停止。

我一直非常沮丧,我的javascript知识相当薄弱,即使我已经取得了不错的进展,我也不停地吠叫错误的树。

我只是觉得我没有以正确的方式解决这个问题,如果有人能给我一些指导我会很感激。

以下是我正在使用的代码:

                   $(document).ready(function() { 
                   jcps.fader(100, '#switcher-panel'); 

                   setTimeout("callCity('#la')",2000); 
                   setTimeout("callCity('#mexico')",4000); 
                   setTimeout("callCity('#ny')",6000); 
                   setTimeout("callCity('#singapore')",8000); 
                   setTimeout("callCity('#australia')",10000);
                   setTimeout("callCity('#france')",12000); 
                   setTimeout("callCity('#england')",14000); 
                   setTimeout("callCity('#spain')",16000); 
                   setTimeout("callCity('#canada')",18000); 
                   setTimeout("callCity('#chicago')",20000); 
                   setTimeout("callCity('#minn')",22000);  
                   setTimeout("callCity('#stpaul')",24000); 
                   setTimeout("callCity('#dallas')",26000); 
                   setTimeout("callCity('#boston')",28000); 
                   setTimeout("callCity('#arizona')",30000); 
                   }); 
                    function callCity(city) 
                    { 
                    $(city).trigger('click'); 
                    } 
                    $('#berlin').mousedown(function() {
              alert('Handler for .mousedown() called.');
                    });
                </script> 

2 个答案:

答案 0 :(得分:0)

我真的不明白这个问题,但这可能会有所帮助

$('.animate').each(function() {

    $(this).animate({height: '600px'}, 10000);
});

$('.animate').click(function() {

    $(this).animate({width: '600px'}, 10000);
});

$('.stop').mouseover(function() {

    $('.animate').stop();
});

http://jsfiddle.net/KXLBV/

答案 1 :(得分:0)

我的一个伙伴帮我解决了这个问题......这是代码:

<script type="text/javascript">
                   $(document).ready(function() {
                   jcps.fader(100, '#switcher-panel');
                   var timeouts = new Array();
                   var cities = ["#la", "#mexico", "#ny", "#singapore", "#australia", "#italy", "#france", "#england", "#spain", "#canada", "#chicago", "#minn", "#stpaul", "#dallas", "#boston", "#berlin", "#arizona"];
                   var timeoutLength = 3400;
                   for (i = 0; i < cities.length; i++)
                   {
                       timeouts[i] = setTimeout("callCity('" + cities[i] +"')", timeoutLength * (i + 1));
                   }
                       $('.switcher').mouseover(function() {
                          for( key in timeouts )
                          {  
                            clearTimeout(timeouts[key]);  
                             }
                           });
                   });
                   function callCity(city)
                    {
                    $(city).trigger('click');
                    }
                </script>