Javascript attr变化与淡出问题

Javascript attr change with fade issue

本文关键字：淡出 出问题 变化 attr Javascript      更新时间：2023-09-26

我想有一个小画廊。1张大图，下面有3张。当其中一张图片被点击时，它会用渐变动画改变主图片/大图的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;
});

但是这只是刷新页面。

我修复了你的代码，它是这样的:

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

请注意，图片是不同的，因为它们是在演示中随机生成的。

如果不知道#main4是什么，那么调用fade函数的方式就没有多大意义。因为它们是异步的，所以你必然会遇到一些平滑问题。

更好的方法是:

$('.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",
)

我没有找到$('.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/

相关文章：