動態懸停效果在流沙過濾後消失

我有一個流沙組合頁面，它可以很好地工作。爲了增加一些樂趣，我增加了prettyPhoto，它也完美地工作。動態懸停效果在流沙過濾後消失

但現在我添加了一個懸停效果的圖像。它正在工作，但是當我對濾鏡進行排序時，懸停效果已經消失。我甚至沒有看到它在Firebug中工作。

加載.js文件 - > jquery，流沙，prettyphoto，然後懸停功能。 PHP文件（WordPress的）看起來像這樣：

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $("img").hover(
      function() { 
       $(this).stop().animate({"opacity": "0.8"}, "slow"); 
      }, 
      function() { 
       $(this).stop().animate({"opacity": "1"}, "slow"); 
      } 
     ); 
    }); 
</script>

php文件的其餘部分：

<!-- #content BEGIN --> 
<div id="contentport" class="clearfix"> 
    <ul class="filter clearfix"> 
     <li><strong>Filter:</strong></li> 
     <li class="active"><a href="javascript:void(0)" class="all">All</a></li> 
     xxxx php magic xxxx 
     <ul class="filterable-grid clearfix"> 
      xxxx php magic xxxx 
      <li data-id="id-<?php echo $count; ?>" data-type="<?php foreach ($terms as $term) { echo strtolower(preg_replace('/\s+/', '-', $term->name)). ' '; } ?>"> 

       <?php 
        // Check if wordpress supports featured images, and if so output the thumbnail 
        if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) : 
       ?> 

       <?php // Output the featured image ?> 

       <a rel="prettyPhoto[gallery]" href="<?php echo $large_image ?>"><?php the_post_thumbnail('portfolio'); ?></a>         

       <?php endif; ?> 

       <?php // Output the title of each portfolio item ?> 
       <p><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></p> 

      </li> 

      xxxx php magic xxxx 
     </ul> 
     xxxx php magic xxxx 
</div>

我希望你有你需要的一切，我已經看了這些鏈接，但我真的不知道該怎麼辦... hover effect with quicksand plugin

jquery live hover

How to apply jQuery quicksand (sort) without losing a jQuery based portfolio hover?和

jQuery quicksand plugin with .click method

提前感謝！

來源

2012-08-06 user1562864

幾乎解決，jQuery的，此代碼的工作。但放大鏡仍然不起作用。

(function($){})(window.jQuery); 

$(document).ready(function(){ 
    $('#contentport > ul > li').live('mouseenter', function(){ 
     $(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '0.8'}, {duration:500}); 

    }); 

    $('#contentport > ul > li').live('mouseleave', function(){ 
     $(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '1'}, {duration:500});       
    });  

});

來源

2012-08-07 07:06:32 user1562864

我不知道這是否會與你的放大鏡問題上需要幫助，但在這個問題上我有一些錯誤的開始痛苦（即流沙殺死我翻轉功能）後，我找到了解決辦法，我是指定selector內的.on()函數調用：

$(document).ready(function(){ 
    $('#contentport').on('mouseenter', 'ul li', function() { 
     $(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '0.8'}, {duration:500}); 

    }); 

    $('#contentport').on('mouseleave', 'ul li', function() { 
     $(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '1'}, {duration:500});       
    });  

});

這似乎解決了這個問題，我在那裏簡單地使用$('#contentport ul li').on('mouseenter', function() {...沒有用克隆的內容合作。

手指交叉這是有幫助的。

來源

2012-08-18 11:27:28 indextwo

動態懸停效果在流沙過濾後消失

回答

相關問題