Эффект анимации при наведении пропадает после фильтра в зыбучих песках

Question

У меня есть страница портфолио с зыбучим песком, которая работает отлично. Чтобы добавить больше веселья, я добавил к нему prettyPhoto, который тоже отлично работает.

Но теперь я добавил эффект наведения на изображения. Это работает, но когда я сортирую с фильтром, эффект наведения исчезает. Я даже не вижу, как это работает в Firebug.

Загрузка файлов.js -> jquery, quicksand, 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>

Я надеюсь, что у вас есть все, что вам нужно, я уже посмотрел эти ссылки, но я действительно не знаю, что делать... эффект наведения с плагином Quicksand

jquery live hover

Как применить jQuery quicksand (сортировать), не теряя зависание портфеля на основе jQuery?

Плагин jQuery Quicksand с методом.click

Заранее спасибо!

Answer 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});                           
    });     

});

Answer 2

Я не уверен, поможет ли это с вашей проблемой с увеличительным стеклом, но после того, как я сам испытал некоторые фальстарты (а именно QuickSand и убил мои функции опрокидывания), я обнаружил, что решение для меня - указать 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() {... не работал с клонированными элементами.

Скрестив пальцы, это полезно.