attr 替換 src 同時有 fadeIn 效果？失效！？

jquery animation jquery3.1.1

火爆浪子 2018-06-29 18:22:45 ‧ 2935 瀏覽

分享至

替換的目標

<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 }} |

直播中

2 個回答

froce

iT邦大師 1 級 ‧ 2018-06-29 23:03:57

最佳解答

CSS3作法：
https://jsbin.com/dayirodiqu/edit?html,output

JQ作法：
https://jsbin.com/ligosewuso/edit?html,output

看你喜歡哪種。

回應 3
分享
檢舉

火爆浪子 iT邦研究生 1 級 ‧ 2018-06-30 07:10:27 檢舉

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

jason311101 iT邦新手 4 級 ‧ 2018-06-30 07:33:03 檢舉

要切換時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的作法。

登入發表回應

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

回應 3
分享
檢舉

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

疑？真假，那這樣我要怎麼隱藏？

jason311101 iT邦新手 4 級 ‧ 2018-06-30 06:57:56 檢舉

最常用就display:none吧

jason311101 iT邦新手 4 級 ‧ 2018-06-30 08:43:52 檢舉

https://jsbin.com/laqewep/edit?html,output

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙