可以将 jQuery 与 Pixastic 一起使用吗？
我有一组链接图像（HTML）：
<a href="#"><img src="test.jpg /></a>
<a href="#"><img src="test2.jpg /></a>
<a href="#"><img src="test3.jpg /></a>
它们是部分透明的（CSS）：
#a img {
border: 0;
opacity: .2;
}
它们在悬停时变得不那么透明（jQuery ）：
$('a img').hover(
function()
{
$(this).animate({opacity: 0.8,}, 200);
});
问题是 - 如何使用 Pixastic 在它们上添加模糊（我不想使用多层和其他黑客，只是 Pixastic）？
我知道它是这样工作的：
$(this).animate({opacity: 0.8,}, 200);
$(this).pixastic("blur");
但我想要动画模糊。如何在鼠标移开时去模糊（我不是指锐化（））？
我正在尝试：
$('# img').mouseout(
function()
{
$(this).animate({opacity: 0.2}, 400);
$(this).pixastic("sharpen");
});
但是像素化的东西似乎不适用于鼠标悬停。我知道我正在中断 jQuery 的动画过程，但不知道如何处理它。
I have a set of link images (HTML):
<a href="#"><img src="test.jpg /></a>
<a href="#"><img src="test2.jpg /></a>
<a href="#"><img src="test3.jpg /></a>
They are partially transparent (CSS):
#a img {
border: 0;
opacity: .2;
}
They're getting less transparent on hover (jQuery):
$('a img').hover(
function()
{
$(this).animate({opacity: 0.8,}, 200);
});
The question is - how to add a blur on them using Pixastic (I don't want to use multiple layers and other hacks, just Pixastic)?
I know it works this way:
$(this).animate({opacity: 0.8,}, 200);
$(this).pixastic("blur");
But I want to animate bluring. How to de-blur (and I don't mean sharpen()) on mouseout?
I'm trying:
$('# img').mouseout(
function()
{
$(this).animate({opacity: 0.2}, 400);
$(this).pixastic("sharpen");
});
But the pixastic thing doesn't seem to work on mouseouts. I know I'm interrupting jQuery's animation process, but don't know how to handle it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
Pixastic 的问题是它总是会替换您的原始照片。但您可以使用画布轻松创建自己的模糊动画效果。在链接元素内，您需要放置图像元素的画布副本。更改像素数据以获得模糊效果并不难。
我想我刚刚在 jQuery 中创建了您想要的效果的 Dojo 版本。您可以在这里看到它： http://westendorp.name/index.html php?category=coding&page=coding/imageEffects
不过，我认为将其移植到 jQuery 并不困难。
The problem with Pixastic is that it always replaces your original photo. But you can just easily create your own blur animation effect with canvas. Inside your link-element you need to place a canvas copy of the image-element. Changing the pixeldata to get a blur effect isn't very hard.
I think i just created a Dojo version of the effect you want in jQuery. You can see it here: http://westendorp.name/index.php?category=coding&page=coding/imageEffects
I don't think it's hard to port this to jQuery though.
希望它能对某人有所帮助：只需在 pixastic 之后链接动画即可。
Hope it will help somebody: just chain animate after pixastic.