使用 JQuery 对 2 个单独的项目进行动画处理并在鼠标悬停时暂停这两个项目

Question

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> 

Answer 1

我不太明白这个问题，但这可能会有所帮助

$('.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/

Answer 2

我的一个朋友帮我解决了这个问题......这是代码：

<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>