没有插件的jQuery crossfade
|
这里有很多东西指向用于做交叉渐变和东西的插件,但是没有一个真正适合我的需求。
我的页面上有两件事:
大图像,包含3个或4个小缩略图的div
单击缩略图时,它将读取src并将主图像源更改为新图像。
我如何使它渐入淡出而另一种渐渐淡出(因此在新图像渐隐之前它不会消失)
这是我的代码:
$(\'.TnImage\').live(\'click\', function() {
var newImage = $(this).attr(\'src\');
var oldImage = $(\'.mainImage\').attr(\'src\')
$(\'.mainImage\').fadeOut(\'slow\');
$(\'.mainImage\').attr(\'src\', newImage).fadeIn(\'slow\');
});
只是为了澄清为什么我不想使用现有的插件,是大多数要求您事先知道要加载的图像列表,缩略图是通过php从mysql数据库中检索的,我宁愿不必使2列出一张缩略图和1张主图像,然后将除一个主div以外的所有图像都隐藏在我要显示的图像中。
我看过一个自行车插件,但我不愿意使用它,我知道人们一直在不重新发明轮子,但是如果我继续使用插件来做事,我永远也不会学jQuery工作原理的基本要素。我曾经使用过出色的IMAGESWITCH,但无法与jquery 1.4.3一起使用,并且我需要此版本的html data(),因此以前依靠此功能,现在陷入困境,所以我为什么要问路不使用插件就可以做到这一点。
没有找到相关结果
已邀请:
3 个回复
棠媳鳖
我知道这是一个粗略的例子,但是它应该涵盖基本原理。
戊袱
过渡和
选项。 http://jsfiddle.net/mattball/xM3cC/
babsoft
可能不是世界上最好的,但是它很简单并且有效。 这是JS Fiddle示例http://jsfiddle.net/DYYCy/