jQuery image src fadeOut fadeIn 效果
jQuery image src fadeOut fadeIn effect
我对这段代码有疑问。它根本不起作用。该过程以 fadinOut 图像结束。我是 JS 初学者。
代码:
$(".intro_lg").click(function() {
$(".intro_lg").fadeOut(1000, function() {
var path = "http://website.com/img/intro2.png";
$(".intro_lg").attr("src", path);
}).fadeIn(1000);
return false;
});
您可以在页面准备就绪后尝试 运行 您的代码 .ready()
:
$(document).ready(function() {
$(".intro_lg").click(function() {
$(this).fadeOut(1000, function() {
var path = "http://website.com/img/intro2.png";
$(this).attr("src", path);
}).fadeIn(1000);
return false;
});
});
与其重复选择器,不如使用 this
。
不使用
$(".intro_lg").fadeOut
使用
$(this).fadeOut
因为“.intro_lg”是 class 并且可以在另一个 html 元素上。
更好的方法不是替换图像 "src",而是隐藏和显示图像(存在于 dom),因为浏览器加载图像需要时间。
例如 html:
<img src="path1" class="intro_lg" alt=""/>
<img src="path2" class="intro_lg" alt="" style="display: none;"/>
脚本:
$(".intro_lg").click(function() {
$(this).fadeOut(1000, function() {
$(".intro_lg").next().fadeIn(1000);
});
return false;
});
我对这段代码有疑问。它根本不起作用。该过程以 fadinOut 图像结束。我是 JS 初学者。
代码:
$(".intro_lg").click(function() {
$(".intro_lg").fadeOut(1000, function() {
var path = "http://website.com/img/intro2.png";
$(".intro_lg").attr("src", path);
}).fadeIn(1000);
return false;
});
您可以在页面准备就绪后尝试 运行 您的代码 .ready()
:
$(document).ready(function() {
$(".intro_lg").click(function() {
$(this).fadeOut(1000, function() {
var path = "http://website.com/img/intro2.png";
$(this).attr("src", path);
}).fadeIn(1000);
return false;
});
});
与其重复选择器,不如使用 this
。
不使用
$(".intro_lg").fadeOut
使用
$(this).fadeOut
因为“.intro_lg”是 class 并且可以在另一个 html 元素上。 更好的方法不是替换图像 "src",而是隐藏和显示图像(存在于 dom),因为浏览器加载图像需要时间。 例如 html:
<img src="path1" class="intro_lg" alt=""/>
<img src="path2" class="intro_lg" alt="" style="display: none;"/>
脚本:
$(".intro_lg").click(function() {
$(this).fadeOut(1000, function() {
$(".intro_lg").next().fadeIn(1000);
});
return false;
});