在流沙中过滤后动画悬停效果消失答案

【问题标题】：animate hover effect dissapears after filter in quicksand在流沙中过滤后动画悬停效果消失
【发布时间】：2012-08-06 19:42:03
【问题描述】：

我有一个带有流沙的投资组合页面，它运行良好。为了增加一些乐趣，我添加了 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

提前致谢！

【问题讨论】：

标签： animation hover prettyphoto quicksand

【解决方案1】：

几乎解决了，对于 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});                           
    });     

});

【讨论】：

【解决方案2】：

我不确定这是否有助于解决您的放大镜问题，但是在我自己在这个问题上遇到了一些错误的开始之后（即 QuickSand 杀死了我的翻转功能），我发现我的解决方案是指定 @987654321 @里面.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() {... 对克隆的元素不起作用。

祈祷很有帮助。

【讨论】：