Fadeout一個圖像，然後改變源和改變淡入圖像

我在這裏工作的滑塊。我正在做的是在一個按鈕上點擊說接下來，我淡出一個圖像，然後動態地改變源，然後淡入。現在我不這樣做與fadeOut（）函數，而不是我通過添加一個css class fadeOut，其中opacity爲0，然後在src更改後刪除該類。我怎樣才能達到目的？我也需要一段時間纔會淡入，我試過addClass（）和removeClass（）方法，但它們都是如此的qucik，以至於不顯示淡入淡出。請幫忙。謝謝。Fadeout一個圖像，然後改變源和改變淡入圖像

這裏是下一步按鈕處理程序

$('#nextHandler').click(function() { 
     var nextListItem = ul.find('li.current').next(); 
     if (nextListItem.length > 0) { 
      ul.find('li.current').removeClass('current'); 
      nextListItem.addClass('current'); 
      var imagePath = ul.find('li.current').children('img').data("fullsrc"); 

      $('#fullImagePlaceholder').fadeOut(function() { 
       $('#fullImagePlaceholder').attr('src', imagePath).fadeIn(500); 
      }, 500); 
     } 
    }); 
});

現在我加入淡出函數的代碼，但它直到不能正常工作。

來源

2013-10-14 Marc Andre Jiacarrini

您可以發佈您迄今爲止的代碼嗎？ – mayabelle

你還沒有發佈你的實際代碼，但我想你想要這樣的東西。當點擊下一個鏈接/按鈕時，它將淡出圖像，編輯src屬性到新圖像，然後再次淡入圖像。

var selectorForImg = 'img'; 
var newSrcLocation = 'img2.jpg'; 

$('#next').click(function (e) { 
    e.preventDefault(); 
    $('selectorForImg').fadeOut(function() { 
     $('selectorForImg').attr('src', newSrcLocation).fadeIn(500); 
    }, 500); 
});

來源

2013-10-14 16:27:44 ediblecode

我想用AddClass（）方法做這件事，而不是fadeOut（）方法，其中我添加了一個名爲fadeOut的不透明度爲0的Css類。 –

增加了代碼，它不工作，請參閱我的更新。 –

@MarcAndre「這不工作」並不是真正的好友。另外，爲什麼你想添加一個不透明度爲0的類？你不想要過渡或..？ – ediblecode

嗯，我不是太肯定，因爲我沒有對你有這麼遠，但也許這樣的事情代碼的任何想法。

$(this).fadeOut("fast", function(){ 
     $(this).attr("background-image", "url([name of new image])").fadeIn("fast"); 
});

這樣的事情，這是這是應用作爲背景圖像的圖像的容器。

來源

2013-10-14 16:27:57

我不認爲他正在使用'背景圖像' – ediblecode

你好像在你的答案中包含了這個:) –

您可以使用CSS關鍵幀動畫。即。

@-webkit-keyframes animation-name { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-moz-keyframes animation-name { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-o-keyframes animation-name { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@keyframes animation-name { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

div{ 
-webkit-animation: animation-name 0.6s ease-in 0.8s both; 
-moz-animation: animation-name 0.6s ease-in 0.8s both; 
-o-animation: animation-name 0.6s ease-in 0.8s both; 
-ms-animation: animation-name 0.6s ease-in 0.8s both; 
animation: animation-name 0.6s ease-in 0.8s both; 
}

我貼在這裏的例子還有： http://jsfiddle.net/guqv7/

來源

2013-10-14 16:35:45 Alan

Whever你想要的東西，其他的事情開始之前，請將它在（）的函數來完成;

來源

2013-10-16 15:37:01 designerNProgrammer

Fadeout一個圖像，然後改變源和改變淡入圖像

回答

相關問題