Question

我是一个新手，因为它涉及到jQuery .. 我正在研究我的投资组合，而且我遇到了..我有一个页面，其中包含可按类别排序的所有投资组合项目（图像）。因此，当我按下“Art”类别时，所有其他catergory都变为低不透明度，因此所选类别保持突出显示。看到它在这里工作：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;
 });
});

我希望有人可以提供帮助..

谢谢！

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

Oké我将第一个代码块中的事件处理程序更改为：

$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>

当我输入您的代码时会发生这种情况。当我启动时，当页面加载时，所有项目组合项目都不会淡入并完全悬停。

有人能告诉我导致语法错误的原因是什么吗？并且语法错误是为什么没有任何消失（当页面加载时）或悬停的原因？

Answer 1

首先，如果您正在使用$(document).ready()，则可以通过

来避免noConflict()来电

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

在hover()事件处理程序中，您只需要检查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（“hidden”）），那么我们不会淡入淡出。：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

但是我真的在挖掘你的效果，唯一的问题是如果你的页面底部有一个方框，在同一类别之间有一个很大的空间。用户可以向下滚动一些，不会看到突出显示一段时间的框而不是将其显示在页面底部。

点击停止/开始'悬停'

4 个答案: