jQuery FadeOut() 不起作用。单击只是跳转
有人可以解释一下这个片段吗？
我正在尝试将 jQuery Masonry 插件与过滤集成。由于某种原因，该函数的 FadeIn 部分适用于所有级别，但 fadeOut() 则不然。
这是代码：
$j('#filter a').click(function(){
var colorClass = '.' + $j(this).attr('class');
//if($j('.portfolio').hasClass(colorClass){
if(colorClass=='.box') {
// show all hidden boxes
$j('.portfolio').children('.invis')
.toggleClass('invis').fadeIn('slow');
} else {
// hide visible boxes
$j('.portfolio').children().not(colorClass).not('.invis')
.toggleClass('invis').fadeOut('slow','linear');
// show hidden boxes
$j('.portfolio').children(colorClass+'.invis')
.toggleClass('invis').fadeIn('slow', 'linear');
}
}
我仍在提高我的 js 和 jquery 技能，但任何有关如何测试输出或修复此问题的帮助将不胜感激。
这是用于过滤的 HTML
<div id="filter">
<ul>
<?php
$taxonomy = 'portfolio-box-sets';
$terms = get_terms($taxonomy, 'hierarchical=0');
echo '<li><a class=".fbox">All</a></li>';
if ($terms) {
foreach($terms as $term) {
echo '<li><a class="'.$term->name.'">' . $term->name . '</a></li>';
}
}
?>
</ul></div>
我也尝试过指定包装元素的宽度，但没有帮助。
Can someone shed some light on this snippet.
I'm trying to integrate the jQuery Masonry Plugin with filtering. For some reason the FadeIn portion of the function works on all levels but the fadeOut() does not.
Here is the code:
$j('#filter a').click(function(){
var colorClass = '.' + $j(this).attr('class');
//if($j('.portfolio').hasClass(colorClass){
if(colorClass=='.box') {
// show all hidden boxes
$j('.portfolio').children('.invis')
.toggleClass('invis').fadeIn('slow');
} else {
// hide visible boxes
$j('.portfolio').children().not(colorClass).not('.invis')
.toggleClass('invis').fadeOut('slow','linear');
// show hidden boxes
$j('.portfolio').children(colorClass+'.invis')
.toggleClass('invis').fadeIn('slow', 'linear');
}
}
I'm still improving at my js and jquery skill set, but any help on how to test output or fix this would be much appreciated.
Here is the HTML for the filtering
<div id="filter">
<ul>
<?php
$taxonomy = 'portfolio-box-sets';
$terms = get_terms($taxonomy, 'hierarchical=0');
echo '<li><a class=".fbox">All</a></li>';
if ($terms) {
foreach($terms as $term) {
echo '<li><a class="'.$term->name.'">' . $term->name . '</a></li>';
}
}
?>
</ul></div>
I've also tried specifying a width to the wrapper element but it didn't help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我根据您提供的代码松散地整理了一个工作淡入淡出切换的快速示例。通过您发布的 html / javascript，我不能 100% 确定最终目标是什么，但是，希望这能让您通过切换找到正确的方向：
jQuery fadeIn / fadeOut 演示
I've put together a quick example of a working fadeIn fadeOut toggle loosely based off the code you provided. With the html / javascript you've posted, I'm not 100% sure what end goal is, however, hopefully this will get you in the right direction with your toggle:
jQuery fadeIn / fadeOut demo