在鼠标悬停时设置两帧之间的时间延迟答案

【问题标题】：Set time delay between two frames on mouseover在鼠标悬停时设置两帧之间的时间延迟
【发布时间】：2010-12-02 05:32:29
【问题描述】：

我必须为单个mouseover 显示两个图像。因此，当我 mouseover 到图像时，首先显示图像，然后延迟 5000 次，需要为相同的悬停显示图像。现在在mouseout 上显示原始图像。

我对 JavaScript 和 jQuery 不太熟悉。
有人可以给我一些关于如何做到这一点的想法。

我所做的是，

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

    setInterval($(this).removeClass(.image1).addClass('image-over1'),5000);
    $(this).removeClass(.image1).addClass('image-over2');

    });
   $('.image1').mouseout(function() {
  $(this).removeClass('image-over1');  
    $(this).removeClass('image-over2').addClass(item);
    });


   $('.image1').click(function(){
    document.location='index.php?page='index.php'; 
    })

【问题讨论】：

如果您可以编辑您的问题并确保在源代码的所有位前放置 4 个空格...这样可以更容易理解您在做什么，因为这会使代码格式化程序为我们很好地展示。或者，突出显示代码位并单击编辑器中的 10101 图标。谢谢！

标签： javascript jquery mouseover setinterval mouseout

【解决方案1】：

.hover() 函数可以让你同时指定 mouseover/mouseout，你需要为setInterval 做一个函数：

$('.image1').hover(function(evt) {

  // mouse over function.

  // DOM Element that got the mouseover.
  var target = evt.target; 

  if (target.timer) {
    clearTimeout(target.timer);
    target.timer = null;
  }

  target.timer = setInterval(function() {

       // $(this) will not work here, since 'this' has changed.
       // depending on your css you shouldn't need to remove the '.image1'
       // class, just make sure .image-over1 and .image-over2 are
       // stronger selectors, or occur after .image1
       $('.image1').addClass('image-over2');    

       // at this point your element will be (just guessing <img>, could be
       // anything really:
       // <img class="image1 image-over1 image-over2" .../>

       // it's absolutely fine for the image to have all those classes as
       // long as your css is correct.       

   }, 5000);

    $('.image1').addClass('image-over1');

}, function(evt) {

   // mouse out function.

  // DOM Element that got the mouseout.
  var target = evt.target; 

  if (target.timer) {
    clearTimeout(target.timer);
    target.timer = null;
  }

   $('.image1').removeClass('image-over1');
   $('.image1').removeClass('image-over2');

 });


$('.image1').click(function(){ document.location='index.php?page='index.php'; })

【讨论】：

谢谢马丁。可以看到效果，但是当鼠标离开时，效果会进入无限循环。如何停止无限循环。请帮助我
另外请提一下如何以相同的时间间隔回到原始状态。
好的，我会为超时添加取消。
可能有一种更简洁的方法可以一直使用 jQuery 来做你想做的事情。看jQuery.delay()等
马丁它没有正常工作。对于鼠标悬停它可以完美地工作，但是当鼠标不在时它会停止工作。在移除鼠标时，两个框架应该被一一移动。任何想法。

【解决方案2】：

首先，我认为你的方法有问题；如果您在鼠标悬停时从元素中删除“image1”类，则该元素将不会被鼠标悬停的 $(".image1") 选择器匹配。您是否有理由需要删除它？如果你这样做了（即，如果你需要禁用 CSS 中的类上定义的某些内容），是否还有其他可以匹配的选择器？

关于延时，如果你使用的jQuery版本大于1.4，可以使用.delay()函数：

$('.image1').mouseover(function() {
 $(this).addClass('image-over1').delay(5000).addClass('image-over2');
});

【讨论】：

我的 jquery 版本是 1.3.2 。我无法修改 jquery，因为它会影响其他代码。你能不能给我一些其他的建议。此外，当鼠标离开时，两帧应该以相同的时间延迟回到原始状态，因为我试图为图像提供动画效果。

【解决方案3】：

也许您可以为这些图像创建一个动画 GIF？然后使用类似于这里的代码：http://www.netmechanic.com/news/vol3/design_no10.htm

【讨论】：

【解决方案4】：

即使图像是动态生成的，也可以在 PHP 中以编程方式生成动画 gif - 请参阅 http://php.net/manual/en/function.imagegif.php

【讨论】：