动态悬停效果在流沙过滤后消失

我有一个流沙组合页面，它可以很好地工作。为了增加一些乐趣，我增加了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

动态悬停效果在流沙过滤后消失

回答

相关问题