JQuery：防止功能運行，直到另一個功能有條件已滿足「X」時間量

我試圖創建一個腳本，當我「懸停」一個特定的HTML元素與特定ID id="HighlightCustomerName"，只有在保持「懸停」2秒或更長時間後，函數纔會暫時將類class="highlighted"應用於HTML元素，並與另一個類class="2Bhighlighted"一起使用。JQuery：防止功能運行，直到另一個功能有條件已滿足「X」時間量

下面看到的，這是不行的，但我認爲這說明了什麼我試着做：

HTML：

<span id="HighlightCustomerName">John Doe</span> 
<span class="2Bhighlighted">John Doe</span>

的Jquery：

$(document).ajaxSuccess(function() { 
      $(".#HighlightCustomerName").hover(function() { 
        $(".2Bhighlighted").delay(2000).addclass("highlighting") 
      });) 
      if ($(".2Bhighlighted").hasClass("highlighting")) 
        { 
         $(".2Bhighlighted").addClass("highlighted") 
        } 
        else{ 
         $(".highlighted").removeclass("highlighted") 
        } 
     });

CSS：

highlighted {bakcground-color: yellow!important;}

這是一個好辦法這個呢？有沒有人有更好的方式做到這一點？林剛想

來源

2013-10-20 Mark

使用的setTimeout（）和clearTimeout（）？ – Popnoodles

'if（$（「。2Bhighlighted」）。hasClass（「highlighting」））'這個條件沒有意義。只是'$（「。highlight」）。removeclass（「highlight」） - 如果它沒有這個類，它將不會執行任何操作。 – Popnoodles

你可以使用CSS3過渡，避免完全的jQuery -

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Answer</title> 
    <script> 
     function changeStyle(className, colorName) { 
      var element = document.getElementsByClassName(className); 
      element[0].style.transition = "background 1.0s linear 2.0s"; 
      element[0].style.background = colorName; 
     } 
    </script> 
</head> 
<body> 
    <span id="HighlightCustomerName" 
      onmouseover="changeStyle('2Bhighlighted','yellow');" 
      onmouseout="changeStyle('2Bhighlighted','white');">John Doe</span> 
    <span class="2Bhighlighted">John Doe</span> 
</body> 
</html>

來源

2013-10-20 20:45:05 dav1dsm1th

var highlightTimeout; 
$("#HighlightCustomerName").hover(function() { 
    highlightTimeout=setTimeout(function(){ 
     $(".2Bhighlighted").addclass("highlighting"); 
    }, 2000); 
}, function(){ 
    $(".highlighted").removeclass("highlighted"); // no point checking, just remove it 
    clearTimeout(highlightTimeout); // this prevents it from happening 
});

另外請注意您的選擇.#HighlightCustomerName錯了

來源

2013-10-20 20:06:18 Popnoodles

var element = $('#hoverMe'); 

hoverChange(element, function() { 
    element.addClass('red'); 
}); 

function hoverChange(element, fn) { 

    var timer = null; 

    element.mouseenter(function() { 
     timer = setTimeout(function() { 
      fn(); 
     }, 2000) 
    }); 

    element.mouseout(function() { 
     clearTimeout(timer);   
    }); 

}

這裏試試：

http://jsfiddle.net/GwADf/

來源

2013-10-20 20:07:18

您需要設置和清除一個計時器，使這個工作：

當您啓動懸停時，請將計時器設置爲2秒。
當您停止懸停時，請清除當前正在運行的任何計時器。
如果2秒內沒有停止盤旋，定時器將會啓動
然後，您可以添加臨時類。
如果你想在一段時間後刪除臨時類，用於去除臨時類

這裏做的是另setTimeout()與一些解釋性意見代碼：

var timer; 
$("#HighlightCustomerName").hover(function() { 
    // if a timer was already running, clear it so we never have multiple ones 
    clearTimeout(timer); 
    // set a timer for 2 seconds 
    timer = setTimeout(function() { 
     // we've been hovering for 2 seconds 
     // add your class here 
     $(".2Bhighlighted").addClass("highlighting"); 
     // then remove the class 5 seconds later 
     setTimeout(function() { 
      $(".2Bhighlighted").removeClass("highlighting"); 
     }, 5000); 
    }, 2000); 
}, function() { 
    // if we stop hovering, clear the timer 
    clearTimeout(timer); 
});

你的代碼也有其他一些錯誤：

你有一個選擇".#HighlightCustomerName"不看的權利。您要麼查詢的是.的課程，要麼是#的ID，但不是兩者都有。
您的大寫的addClass()和removeClass()是不正確的。

來源

2013-10-20 20:07:21 jfriend00

JQuery：防止功能運行，直到另一個功能有條件已滿足「X」時間量

回答

相關問題