點擊停止/開始「懸停」

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

但我真的挖你的效果，唯一的問題存在是，如果你有對頁面底部的箱子與其他同一類別之間的大的空間。用戶可能會向下滾動某些內容，而不會看到突出顯示一段時間的框，而不會將其放在頁面的底部。