使用點擊功能禁用jquery懸停功能

我們有一個畫廊，當您將光標懸停在圖像div上時，標題會淡入。下一步是添加一個顯示所有標題的按鈕，所以人們可以滾動和閱讀，而不必在屏幕上運行光標。使用點擊功能禁用jquery懸停功能

創建showall函數很容易，但是當光標經過任何照片時，懸停功能會觸發並且該圖像上的標題消失。

當showall處於活動狀態時，是否有簡單的方法讓showall功能禁用懸停功能？

我們基本的jQuery代碼是下面，.tease是標題：

$('.tease').hide(); 
$('.img33, .img40, .img50, .img60').hover(
    function(){ $(this).children('.tease').fadeIn('900'); }, 
    function(){ $(this).children('.tease').fadeOut('2500'); } 
);

每個圖像的基本的html：

<div class="img33"> 
<img src="../dir/someimage.jpg"> 
<div class="tease">Tease copy</div> 
</div>

來源

2012-11-13 Tom

我可以看到你的'showall'方法的點擊函數，所以我可以正確回答這個問題。 – Ohgodwhy

您可以定義一個全局變量，您在懸停函數中檢查。

例如

var hoverEnabled = true; 

$('.tease').hide(); 
$('.img33, .img40, .img50, .img60').hover(
    function(){ if(hoverEnabled) $(this).children('.tease').fadeIn('900'); }, 
    function(){ if(hoverEnabled) $(this).children('.tease').fadeOut('2500'); } 
); 

$('#showAllButton').click(function() { 
    $('.tease').show(); 
    hoverEnabled = false; 
}

另外，您可以綁定在你的SHOWALL功能使用.bind()和事件名稱（例如hover.showTease）和.unbind()它的懸停事件。

來源

2012-11-13 09:40:27 Ketola

謝謝，這對我們想要的是完美的。 – Tom

您可以取消綁定「懸停」是這樣的：

$(this).unbind('mouseenter mouseleave');

只要您想禁用懸停，請執行此操作。或者，爲了獲得更好的控制權並不繼續添加和刪除事件，您可能需要引入一個添加和刪除的類，並且只有在某些類設置爲該元素時才執行懸停操作。像這樣：

$(this).hover(
    function() { 
     if ($(".yourElement").hasClass("allowHover")) { 
      ... 
     } 
    }, 
    function() { 
     if ($(".yourElement").hasClass("allowHover")) { 
      ... 
     } 
    } 
);

然後只需添加或刪除一個類，懸停將啓用或禁用。

來源

2012-11-13 09:37:58

var allShown = false; 

function showAll(){ 
    //some imaginary code 

    //we're showing all 
    allShown = true; 
}

這應該是ni準備好的範圍。

$(function(){ 
    $('.img33, .img40, .img50, .img60').hover(function(){ 
     if(allShown === false){ 
      $(this).children('.tease').fadeIn('900'); 
     } 
    },function(){ 
     if(allShown === false){ 
      $(this).children('.tease').fadeOut('2500'); 
     } 
    }); 

    $('ele').on('something', function(){ 
     //some code.. 
     allShown = false; 
    }); 

    //some event to fire the showAll function 
    $('ele').on('something', function(){ 
     showAll(); 
     allShown = true; 
    }); 



});

來源

2012-11-13 09:39:36 Ohgodwhy

使用點擊功能禁用jquery懸停功能

回答

相關問題