Javascript attr change with fade issue

Question

Я пытаюсь создать небольшую галерею. 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; 
}); 

Но это просто обновляет страницу. Любая оценка была бы оценена

Answer 1

Я установил свой код, и это, как это:

$('[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

Пожалуйста, обратите внимание, что фотографии отличаются, так как они генерируются случайным образом в демо.

Answer 2

, не зная, что такое # 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; 
}); 

Теперь убедитесь, что вы предварительно загрузили изображение, чтобы получить плавную анимацию

eg

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 3

я не нашел $('.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/