jQuery 没有动画链接

发布于 2024-09-15 10:12:19 字数 889 浏览 2 评论 0原文

我正在尝试使图像滑块插件的淡入淡出效果与链接正常工作。

目前，滑块正确淡出，但链接无法更改。第一张图片应该链接到 Google.com &第二个链接应该链接到 Hotmail.com，但是它们都仅链接到 Hotmail.com（最后一张图片的链接；无论您使用多少张图片，情况都是如此）。

为了实现淡入淡出，我使用 .animate({opacity:0}}) & 1 等。以下是似乎影响动画的行（分别为 72、215 和 216）：

$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);

$(this.slides).stop().animate({opacity:0}, {
        duration: this.settings.duration,
        easing:this.settings.easing
} );
$(this.slides).eq(index).stop().animate( {opacity:1}, {
        duration: this.settings.duration,
        easing:this.settings.easing
} );

来源： http://pastebin.com/9JwaM9tg

测试站点： http://matthewruddy.com/demo

感谢任何可以帮助我的人。真的很感激。

原文

I am trying to get the fade effect of my image slider plugin to work correctly with links.

At the moment the slider fades correctly however the links are failing to change. The first image is supposed to link to Google.com & the second link is supposed to link to Hotmail.com however both of them are linking to Hotmail.com only (the link for the last image; this is the case no matter how many images you use).

To achieve the fade I am using .animate({opacity:0}}) & 1, etc. Here are the lines that seem to effect the animation (72, 215 & 216 respectively):

$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);

$(this.slides).stop().animate({opacity:0}, {
        duration: this.settings.duration,
        easing:this.settings.easing
} );
$(this.slides).eq(index).stop().animate( {opacity:1}, {
        duration: this.settings.duration,
        easing:this.settings.easing
} );

Source: http://pastebin.com/9JwaM9tg

Test site: http://matthewruddy.com/demo

Thanks to anyone who can help me out. Really appreciate it.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深海夜未眠 2024-09-22 10:12:19

您只设置了 li 的不透明度，因此虽然它不可见，但当不透明度达到 0 时它仍然会显示，您应该设置 display: none 以便 li 完全隐藏，这应该允许当前可见的图像正确链接。

$(this.slides).css({'opacity':0, 'display':'none'}).eq(this.currentNo).css({'opacity':1, 'display':'block'});

$(this.slides).stop().animate({opacity:0}, {
    duration: this.settings.duration,
    easing:this.settings.easing,
    complete:function(){
        $(this).css({'display':'none'});
    }
});

$(this.slides).eq(index).stop().css('display','block').animate( {opacity:1}, {
    duration: this.settings.duration,
    easing:this.settings.easing
});

You are only setting the opacity of the li so while it is not visible it is still displayed when the opacity reaches 0 you should set display: none so that the li is completely hidden this should then allow the currently visible image to link properly.

$(this.slides).css({'opacity':0, 'display':'none'}).eq(this.currentNo).css({'opacity':1, 'display':'block'});

$(this.slides).stop().animate({opacity:0}, {
    duration: this.settings.duration,
    easing:this.settings.easing,
    complete:function(){
        $(this).css({'display':'none'});
    }
});

$(this.slides).eq(index).stop().css('display','block').animate( {opacity:1}, {
    duration: this.settings.duration,
    easing:this.settings.easing
});

回复收藏 0 原文

~没有更多了~