基本上,我希望在点击按钮后将文本淡出到一定的不透明度。
我试图修改以下过滤器效果的fadeTo() jquery。代码取自http://jsfiddle.net/gxfBD/33/
$(".filter").click( function () {
var filterText = $(this).attr('href').replace('#','');
$("li").show().not('.'+filterText).hide();
});
$(".clearfilter").click( function() {
$("li").show();
});
代码已修改为https://jsfiddle.net/Eelyn/9pw0uecz/
$(document).ready(function() {
$(".filter").click( function () {
var filterText = $(this).attr('href').replace('#','');
$("li").show().not('.'+filterText).fadeTo("slow", 0.33);
});
$(".clearfilter").click( function() {
$("li").fadeTo("slow", 1);
});
});
但是在我更改代码后,过滤功能不起作用。这意味着我不能使用fadeTo("slow", 1)
清除过滤器。请帮助!谢谢!
请指教。
来自jQuery网站:
https://api.jquery.com/fadeTo/. fadeto()方法使匹配元素的不透明度变成动画。它类似于. fadein()方法,但该方法会隐藏元素,并始终淡出为100%不透明度。http://api.jquery.com/show/
匹配的元素将立即显示,没有动画。这个大致相当于调用.css("display", "block"),只是display属性被恢复到最初的状态。如果一个元素的显示值为inline,然后被隐藏并显示,它将再次以inline方式显示。
jQuery fadeAt对display css属性没有任何作用。所以元素仍然在页面上。当元素没有display:hidden时,show方法不做任何事情。
http://jsfiddle.net/kamikazefish/gxfBD/106/$(document).ready(function() {
$(".filter").click( function () {
var filterText = $(this).attr('href').replace('#','');
$("li").fadeTo("slow", 1).not('.'+filterText).fadeTo("slow", 0.33);
});
$(".clearfilter").click( function() {
$("li").fadeTo("slow", 1);
});
});
.fadeTo只改变不透明度,所以你需要使用fadeTo来改变元素,而不是.show
。
此外,最好将组拆分为淡入和淡出,并对它们应用不同的动画,这使得过滤掉的li
s淡入,而其他先前的淡出li
s同时淡入。
$(document).ready(function() {
$(".filter").click( function () {
var filter = '.' + $(this).attr('href').replace('#','');
$("li")
.filter(filter).fadeTo("slow", 1) // fade in those not filtered
.end() // Back to original set.
.not(filter).fadeTo("slow", 0.33); // fade out those filtered.
});
$(".clearfilter").click( function() {
$("li").fadeTo("slow", 1);
});
});
看到jsfiddle