2012-08-06 5 views
0

나는 완벽하게 작동하는 quicksand가있는 포트폴리오 페이지가 있습니다. 재미 좀 더하기 위해 prettyPhoto를 추가했습니다. 완벽하게 작동했습니다.살아 움직이는듯한 호버 효과가 순간적으로 필터 뒤에 사라집니다.

하지만 이미지에 호버 효과를 추가했습니다. 그것은 작동하지만 필터로 정렬 할 때 호버 효과가 사라졌습니다. 나는 Firebug에서 작동하는 것을 보지 못한다.

.js 파일 -> jquery, quicksand, prettyphoto 및 hover 기능을로드 중입니다. PHP 파일 (워드 프레스)는 다음과 같습니다

<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

,681,684 사전에 290,243,210

jQuery quicksand plugin with .click method

감사합니다!

답변

0

거의 해결되었지만 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});       
    });  

}); 
0

이 당신의 돋보기 문제에 도움이 될 것입니다 만약 내가 잘 모르겠지만, (즉, 무덤 내 롤오버 기능을 죽이는)이 문제를 자신에 대한 몇 가지 잘못된 시작과 고통 후에, 나는 나를 위해 해결책을 발견은에 있었다

$(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() {...를 사용하여 복제 된 요소와 작동하지 않았다 어디에서 나를 위해 문제를 해결하기 위해 듯 다음 selector 내부 .on() 함수 호출을 지정합니다.

손가락이 도움이되었습니다.