点击停止/开始“悬停”

Question

我是一个新手，因为它涉及到jQuery .. 我正在处理我的投资组合，我卡住了..我有一个页面，所有投资组合项目（图片）可以按类别排序。因此，当我按类别'艺术'时，所有其他类目都变成低透明度，因此所选类别保持'突出显示。看到它在这里工作：link text

但是，当我将鼠标悬停在不透明度较低的项目上时，它们会再次突出显示。我如何将这个.hover函数临时锁定，以便在选择某个类别时，其他项目（图像）在悬停时不执行任何操作？

这是我用于在index.html中的悬停（此为每个类别）的代码：

var $j = jQuery.noConflict();$j(document).ready(function(){  
    $j(".art").css({opacity: 0}); // Loaded at 0 opacity 
    $j(".art").fadeTo(900, 0.8); // Onload fade items to 80% 

    $j(".art").hover(function(){ 
    $j(this).fadeTo("fast", 1.0); // Rollover at 100% 
    },function(){ 
    $j(this).fadeTo("fast", 0.8); // Rollout at 80% 
    }); 
}); 

而且此代码为类别筛选器（代码是一个外部。js文件）：

$(document).ready(function() { 
$('ul#navfilter a').click(function() {  
    $(this).css('outline','none'); 
    $('ul#navfilter .current').removeClass('current'); 
    $(this).parent().addClass('current'); 
    var filterVal = $(this).text().toLowerCase().replace(' ','-'); 
    if(filterVal == 'all') { 
    $('.wrap .hidden').fadeTo('slow' ,0.8).removeClass('hidden'); 
    } else { 
    $('.wrap .masonryWrap > div').each(function() {   
    if(!$(this).hasClass(filterVal)) { 
    $(this).fadeTo('slow' ,0.08).addClass('hidden'); 
    } else { 
    $(this).fadeTo('slow' ,0.8).removeClass('hidden'); 
    } 
    }); 
    } 
    return false; 
}); 
}); 

我希望有人能帮助..

谢谢！

------ -----编辑

奥凯我改变了事件处理程序的第一代码块到：

$j(".art").hover(function() { 
    if (! j$(this).hasClass("hidden")) { 
     $j(this).fadeTo("fast", 1.0); 
    } // Rollover at 100% 
},function(){ 
    if (! j$(this).hasClass("hidden")) { 
     $j(this).fadeTo("fast", 0.8); // Rollout at 80% 
    } 
}); 

就像CrazyJugglerDrummer说。 但现在的悬停功能完全不工作.. 我的文档远远进一步得到了线路上的语法错误（见下文最后一行）：

<script type="text/javascript">$(function(){ 
    //run masonry when page first loads 
    $('.wrap').masonry(); 

    //run masonry when window is resized 
    $(window).resize(function() { 
     $('.wrap').masonry(); 
    }); 
}) //syntax error on this line </script> 

现在我的推杆在“noConflict '并按照'RUSS CAM的建议是这样的：

<script type="text/javascript"> 
jQuery.noConflict();jQuery(document).ready(function($) { 
    //run masonry when page first loads 
    jQuery('.wrap').masonry(); 

    //run masonry when window is resized 
    jQuery(window).resize(function() { 
     jQuery('.wrap').masonry(); 
    }); 

      }); // Still syntax error on this line 
</script> 

但是现在我仍然从上面的最后一行得到了语法错误。

我在这里做错了什么？

---

感谢CrazyJugglerDrummer，只是现在我得到的HTML文件行206语法错误，请参阅下面

<script type="text/javascript">$(function(){ 
//run masonry when page first loads 
$('.wrap').masonry(); 

//run masonry when window is resized 
$(window).resize(function() { 
    $('.wrap').masonry(); 
}); 

     }) //syntax error on this line </script> 

最后一行出现这种情况时，我把你的代码。并且当我启动时，所有投资组合项目都不会在加载te页面时淡入并悬停。

有人可以告诉我是什么导致语法错误？语法错误是什么都没有消失（当页面加载时）或悬停的原因？

Answer 1

首先，如果你;再使用$(document).ready()，可以避开noConflict()呼叫在您的hover()事件处理程序使用

jQuery(document).ready(function($) { ... }); // pass in jQuery as $ argument 

开始，你只需要检查的hidden CSS类，和如果存在，请不要执行不透明度更改（通过淡入淡出）。

Answer 2

在第一代码块更改您的事件处理程序：

$j(".art").hover(function() { 
    if (! $j(this).hasClass("hidden")) { 
     $j(this).fadeTo("fast", 1.0); 
    } // Rollover at 100% 
},function(){ 
    if (! $j(this).hasClass("hidden")) { 
     $j(this).fadeTo("fast", 0.8); // Rollout at 80% 
    } 
}); 

如果元素是隐藏的（hasClass（“隐藏”）），那么我们不褪色它或缩小。 ：D

Answer 3

明白了吧！ 我改变了下面的事件处理程序：

$j(".art").hover(function() { 
    if (! j$(this).hasClass("hidden")) { 
     $j(this).fadeTo("fast", 1.0); 
    } // Rollover at 100% 
},function(){ 
    if (! j$(this).hasClass("hidden")) { 
     $j(this).fadeTo("fast", 0.8); // Rollout at 80% 
    } 
}); 

下面的代码：

$j(".art").hover(function(){ 
     if(!$j(this).hasClass("hidden")){ 
    $j(this).fadeTo("fast", 1.0); } // Rollover at 100% 
    },function(){ 
     if(!$j(this).hasClass("hidden")){ 
    $j(this).fadeTo("fast", 0.8); } // Rollout at 80% 
    }); 

现在我不明白的语法错误和悬停只工作了可见的物品！

:)

谢谢大家的帮助！

Answer 4

我喜欢这种效果。工作很好。 你也可以采用不同的方法来过滤石工，这是我做的。在过滤时，我添加并移除了一个隐藏的类并重新加载了砌体。因此，元素在过滤或过滤时会重新排列。

参见：http://jasondaydesign.com/masonry_demo

但我真的挖你的效果，唯一的问题存在是，如果你有对页面底部的箱子与其他同一类别之间的大的空间。用户可能会向下滚动某些内容，而不会看到突出显示一段时间的框，而不会将其放在页面的底部。