动态悬停效果在流沙过滤后消失
问题描述:
我有一个流沙组合页面,它可以很好地工作。 为了增加一些乐趣,我增加了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
How to apply jQuery quicksand (sort) without losing a jQuery based portfolio hover?和
jQuery quicksand plugin with .click method
提前感谢!
答
几乎解决,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});
});
});
答
我不知道这是否会与你的放大镜问题上需要帮助,但在这个问题上我有一些错误的开始痛苦(即流沙杀死我翻转功能)后,我找到了解决办法,我是指定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() {...
没有用克隆的内容合作。
手指交叉这是有帮助的。