iT邦幫忙

0

attr 替換 src 同時有 fadeIn 效果?失效!?

  • 分享至 

  • xImage

替換的目標

<img class="" id="productview_icon" src="">

觸發 event 的對象

<img class="change-display" data-icon_src="xxx" src="">

event

e.preventDefault();
var icon_src = e.currentTarget.dataset.icon_src;
$('#productview_icon').fadeIn().attr('src', icon_src);

我發現這樣無法達到 fadeIn 效果
他就直接換src 了,一點效果也沒有
邏輯死啦,哪裡有問題?

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
froce
iT邦大師 1 級 ‧ 2018-06-29 23:03:57
最佳解答
火爆浪子 iT邦研究生 1 級 ‧ 2018-06-30 07:10:27 檢舉

因為我是有多張圖片切換。

要切換時fadeIn的話那要在切換前讓前一張fadeOut吧
總之就是切換前讓前一張隱藏>更改src>再fadeIn
或者我記得還有一個控制兩者的fadeToggle不知道能不能用

froce iT邦大師 1 級 ‧ 2018-06-30 08:45:52 檢舉

JQ:
https://jsbin.com/kicusuqavu/edit?html,output

CSS3 keyframes:
https://jsbin.com/dezadavogo/edit?html,output
因為要重做動畫,所以一定要先複製DOM然後新增回去。
有時候動畫不只是fadein而已,所以順便列了keyframes的作法。

0
jason311101
iT邦新手 4 級 ‧ 2018-06-29 19:19:36

我記得好像元素要在隱藏狀態fadeIn()才有效果
試試這樣?

e.preventDefault();
var icon_src = e.currentTarget.dataset.icon_src;
$('#productview_icon').css('display','none');
if($('#productview_icon').css('display')=='none')
{
	$('#productview_icon').attr('src', icon_src).fadeIn();
}

每次觸發時就把display改none 當display為none時在換src換好再fadeIn
因為src跟fadeOut速度很快幾乎是同時的所以不能用fadeOut

火爆浪子 iT邦研究生 1 級 ‧ 2018-06-29 22:13:34 檢舉

疑?真假,那這樣我要怎麼隱藏?

最常用就display:none吧

我要發表回答

立即登入回答