鼠標懸停時在兩幀之間設置時間延遲

Question

我必須爲單個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'; 
    }) 

Answer 1

的.hover()功能可以讓你在同時指定鼠標懸停/鼠標移開同時，你需要做一個功能的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'; }) 

Answer 2

首先，我覺得有一個在你的方法有問題;如果從鼠標懸停的元素中刪除「image1」類，那麼該元素將不會與鼠標懸停的$（「。image1」）選擇器匹配。是否有理由需要刪除它？如果你這樣做（即，如果你需要禁用CSS中的類定義的東西），是否有其他一些選擇器可以匹配？

至於時間延遲，如果你使用jQuery的版本大於1.4，則可以使用.delay（）函數：

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

Answer 3

也許你創建這些圖像的GIF動畫???然後使用類似於此代碼：http://www.netmechanic.com/news/vol3/design_no10.htm

Answer 4

即使圖像被實時生成，有可能以程式設計生成PHP gif動畫 - 看http://php.net/manual/en/function.imagegif.php