Question

我的代码有问题。它根本不起作用。该过程以fadin结束，然后是图像。我是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;
});

Answer 1

您可以尝试使用.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。

<强> Here is an Example

Answer 2

不要使用

$(".intro_lg").fadeOut

使用

$(this).fadeOut

因为＆＃34; .intro_lg＆＃34;是类，可以在另一个HTML元素上。更好的方法不是取代image＆＃34; src＆＃34;，而是隐藏和显示图像（存在于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;
});

jQuery图像src fadeOut fadeIn效果

2 个答案: