Javascript attr 变化与淡化问题

Question

我想拥有一个小画廊。 1 张大图片，下方有 3 张。单击下面的其中一张图片时，它将使用淡入淡出动画更改 main/large 图片的 img src。

html 是 -

    <div class="col-xs-12 col-sm-6">
        <div class="col-xs-12">
            <div class="col-xs-12 col-sm-12" style="padding-left: 5px; padding-right: 5px;">
                <img alt="Bentley Flying Spur" id="main1" src="img/gallery/flying-spur/1.JPG" style="border-bottom: 10px solid #fff;" width="100%" />
            </div>
            <div class="col-xs-4 col-sm-4" style="padding-left: 5px; padding-right: 5px;">
                <a class="altimage1" href="" title="switch"><img alt="" src="img/gallery/flying-spur/1.JPG" width="100%" /></a>
            </div>
            <div class="col-xs-4 col-sm-4" style="padding-left: 5px; padding-right: 5px;">
                <a class="altimage2" href="" title="switch"><img alt="" src="img/gallery/flying-spur/2.JPG" width="100%" /></a>
            </div>
            <div class="col-xs-4 col-sm-4" style="padding-left: 5px; padding-right: 5px;">
                <a class="altimage3" href="" title="switch"><img alt="" src="img/gallery/flying-spur/3.JPG" width="100%" /></a>
            </div>
        </div>
        <h2>
            Flying Spur W12
        </h2>
        <p>
            Colour | <strong>Sapphire Blue</strong>
        </p>
        <p>
            Engine | <strong>6.0 litre twin-turbocharged W12</strong>
        </p>
        <p>
            Max Power | <strong>616 bhp / 460kW / 625 PS @ 6,000RPM</strong>
        </p>
        <p>
            Top Speed | <strong>199mph / 320km/h</strong>
        </p>
    </div>

而没有淡入淡出的 javascript 是....

    $(function () {
    $('.altimage1').click(function () {
        $("#main1").attr('src', "img/gallery/flying-spur/1.JPG");
        return false;
    });
});

而我尝试的 javascript 淡入淡出是

$('.altimage12').click(function () {
    $("#main4").fadeOut(400);
    $("#main4").attr('src', "img/gallery/1951/3.JPG");
    $("#main4").fadeIn(400);
    return false;
});

但这只是刷新了页面。任何见解将不胜感激

Answer 1

在不知道#main4 是什么的情况下，您调用淡入淡出函数的方式没有多大意义。因为它们是异步的，所以你一定会遇到一些平滑问题...

更好的方法是：

$('.altimage12').click(function () {

    $("#main4").fadeOut(400, function() {

    // 1st fadeout complete so now change the image
    $("#main4").attr('src', "img/gallery/1951/3.JPG");

    // and now fade in again
    $("#main4").fadeIn(400);

});


    return false;
});

现在确保您已预加载图像以获得更流畅的动画

例如

var images = new Array()

function preload() {
  for (i = 0; i < preload.arguments.length; i++) {
    images[i] = new Image()
    images[i].src = preload.arguments[i]
  }
}
preload(
  "http://your.site/img/gallery/1951/1.JPG",
  "http://your.site/img/gallery/1951/2.JPG",
  "http://your.site/img/gallery/1951/3.JPG",
)

Answer 2

我没有找到 $('.altimage12') 和 $("#main4")，但与其他选择器一起使用时一切正常。

$('#main1').click(function () {
    console.log('click');
    $("#main1").fadeOut(400);
    $("#main1").attr('src', "http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/3d-glossy-orange-orbs-icons-business/105429-3d-glossy-orange-orb-icon-business-tool-hammer4-sc44.png");
    $("#main1").fadeIn(400);
    return false;
});

https://jsfiddle.net/chukanov/aw7u2sL8/2/

Answer 3

我修改了你的代码，结果是这样的：

$('[class*="altimage"]').click(function() {
  var elem = $(this);
  $("#main1").fadeOut(400, function() {
    $("#main1").attr('src', elem.find("img").attr('src')).fadeIn(400);
  });
  return false;
});

Here is the JSFiddle demo

请注意，图片在演示中是随机生成的，因此有所不同。

Javascript attr 变化与淡化问题

Javascript attr change with fade issue

html

javascript

jquery

src

attr