jQuery更改圖像屬性 - 但也淡入元素

我創建了一個提供主題預覽的顏色切換器。jQuery更改圖像屬性 - 但也淡入元素

在它只是切換圖像源和負載在新的圖像。

我想知道如果我可以將一個淡入效果，它也時刻？

我當前的jQuery代碼是：

// Theme Selection.... 
    $('.colour-block a').click(function() 
    { 
    $('.colour-block a').removeClass('selected'); 

    // Add Class - Selected... 
    $(this).addClass('selected'); 

    // Get The Theme ID... 
    var id = $(this).attr('id'); 

    // Get The Theme Class... 
    var chosen = $(this).attr('rel'); 

    switch(chosen) 
    { 
     case 'rugged-lilac': 
      $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-rugged-lilac.png'); 
      $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-rugged-lilac-phone.png'); 
      break; 
     case 'rugged-olive': 
      $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-rugged-olive.png'); 
      $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-rugged-olive-phone.png'); 
      break; 
     case 'rugged-orange': 
      $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-rugged-orange.png'); 
      $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-rugged-orange-phone.png'); 
      break; 
     case 'rugged-red': 
      $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-rugged-red.png'); 
      $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-rugged-red-phone.png'); 
      break; 
     case 'stylised-blue': 
      $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-stylised-blue.png'); 
      $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-stylised-blue-phone.png'); 
      break; 
     case 'stylised-pink': 
      $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-stylised-pink.png'); 
      $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-stylised-pink-phone.png'); 
      break; 
     case 'stylised-red': 
      $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-stylised-red.png'); 
      $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-stylised-red-phone.png'); 
      break; 
     case 'business-blue': 
      $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-business-blue.png'); 
      $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-business-blue-phone.png'); 
      break; 
     case 'business-pink': 
      $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-business-pink.png'); 
      $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-business-pink-phone.png'); 
      break; 
     case 'business-red': 
      $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-business-red.png'); 
      $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-business-red-phone.png'); 
      break; 
    } 

    $('.theme_id').val(id); 

});

感謝

來源

2014-06-18 StuBlackett

你可以使用這樣的：

先隱藏，然後使用淡入

$('.your_img_class').attr('src', 'image_path').hide().fadeIn();

來源

2014-06-18 10:31:18

您可以使用CSS3 Transition一樣，

a.selected img { 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
}

做到這一點你可以參考Crossfading images

來源

2014-06-18 10:32:38

你可以這樣做。只需在開關盒之前隱藏（）圖像，在開關盒之後淡入圖像。

$('img.preview-desktop, img.preview-phone').hide(); 

switch(chosen) 
    { 
     case 'rugged-lilac': 
      $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-rugged-lilac.png'); 
      $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-rugged-lilac-phone.png'); 
      break; 
....... 
    } 

$('img.preview-desktop, img.preview-phone').fadeIn('slow');

來源

2014-06-18 10:34:02

可以減少你這樣的代碼，

$('.colour-block a').click(function() { 
    $('.colour-block a').removeClass('selected'); 
    $(this).addClass('selected'); 
    // Get The Theme ID... 
    var id = $(this).attr('id'); 
    // Get The Theme Class... 
    var chosen = $(this).attr('rel'); 
    $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-' + chosen + '.png').hide().fadeIn(); 
    $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-' + chosen + '-phone.png').hide().fadeIn(); 
    $('.theme_id').val(id); 
});

來源

2014-06-18 10:35:39

太棒了！我正在尋找方法來減少我的代碼，因爲我使用的是「DRY」方法 – StuBlackett

$('image_id').attr('src', 'path').fadeOut(0).fadeIn(5000);

來源

2014-06-18 10:40:43

這會導致問題，因爲圖像已經可見，但是淡入效果應該是隱藏的對象。 –

你說得對。我現在測試它。我的錯 –

必須等待圖像被隱藏，然後改變其屬性：

$(".your_img_class").fadeOut("slow", function(){ 
    $(this).attr("src", src).fadeIn("slow"); 
})

你可以得到這個效果通過給fadeOut方法增加一個回調。

來源

2015-09-08 11:12:48

jQuery更改圖像屬性 - 但也淡入元素

回答

相關問題