1

我们有一个画廊，当您将光标悬停在图像 div 上时，标题会淡入。我们的下一步是添加一个显示所有字幕的按钮，这样人们就可以滚动和阅读，而无需在整个屏幕上移动光标。

创建 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>
4

3 回答 3

3

您可以只定义一个在悬停函数中检查的全局变量。

例如

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

.bind()或者，您可以使用事件名称（例如 hover.showTease）绑定悬停事件，并将.unbind()其绑定到 showall 函数中。

于 2012-11-13T09:40:27.057 回答
2

您可以通过这种方式解除“悬停”的绑定：

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

当您想禁用悬停时，只需执行此操作。或者，为了更好地控制而不是继续添加和删除事件，您可能希望引入一个添加和删除的类，并且仅在将某个类设置为元素时才执行悬停动作。像这样：

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

然后只需添加或删除一个类，悬停将被启用或禁用。

于 2012-11-13T09:37:58.123 回答
0 
var allShown = false;

function showAll(){
    //some imaginary code

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

这应该是 DOM 准备好的范围。

$(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-13T09:39:36.590 回答