圖像交換與JQuery之間的定時轉換？

我有這樣的代碼：圖像交換與JQuery之間的定時轉換？

$('.pic_windows img').mouseenter(function() { 
    $(this).effect('shake', { 
     times : 4, 
     distance : 5 
    }, 15).attr('src', $(this).attr('src').replace(/.jpg/, '-1.jpg')) 
}); 

$('.pic_windows img').mouseleave(function() { 
    $(this).attr('src', $(this).attr('src').replace(/-1.jpg/, '.jpg')) 
});

在那裏我使用jQuery的.attr交換圖像，但我想在第二大約1的過程中發生了交換。我已經使用了這個功能，並獲得所有這些複雜的「CSS3過渡與JQuery後備」教程。有沒有一種方法可以'改變'.attr的變化？

我想我應該做一個fadeout而其他fadeIn但我不知道如何寫它，因爲我幾乎是一個完整的JQuery新手。我有幾個這樣的轉換要在幾頁的過程中完成。如果我只需要爲一個實例寫這個，那就太好了。

UPDATE在mouseenter上，圖像抖動，然後應該在此晃動期間從一張圖片淡入其交換的圖片。在mouseleave上，圖像應該淡出回原始圖片。不幸的是，我也發現搖動的效果是打破IE瀏覽器，所有版本，以及圖像交換（它根本沒有看到圖像2）

來源

2012-05-29 huzzah

你能描述一下你想在mouseenter和mouseleave上看到的完整效果嗎？ – Sinetheta

當然，我已經更新了我的OP。 – huzzah

已更新問題的修訂答案 – Sinetheta

不，你不能動畫屬性改變。你可以做的是克隆一個元素，改變它們之間的屬性和轉換。

var target = $(this).fadeOut(); 
var src = target.attr('src').replace(/-1.jpg/, '.jpg'); 
var copy = target.clone() 
    .attr('src', src) 
    .hide() 
    .insertAfter(target) 
    .fadeIn();

編輯：感謝您說明您的意圖，我會建議不與「SRC」，這將從根本上需要建設一個小插件狀態打。相反，在這裏堅持所需的效果，在懸停上顯示圖像。 jsFiddle

HTML

<div class="shaker"> 
    <img src="http://lorempixel.com/output/nature-q-c-360-240-3.jpg" /> 
    <img class="hover" src="http://lorempixel.com/output/technics-q-c-360-240-9.jpg" /> 
</div>

CSS

.shaker { 
    position: relative; 
} 
.shaker img { 
    position: absolute; 
} 
.hover { 
    display: none; 
}

$('.shaker').hover(function() { 
    $(this).effect('shake', { 
     times: 4, 
     distance: 5 
    }, 15); 
    $(this).find('.hover').fadeIn(); 
}, function() { 
    $(this).find('.hover').stop().fadeOut(); 
});

http://jsfiddle.net/eHQ3t/13/

來源

2012-05-29 03:21:56 Sinetheta

它可以運行到克隆部分。然後，我得到一個應該在容器外的FOUC，並且mouseenter功能會中斷。如果我將這部分放入mouseenter和mouseleave事件（從.jpg交換到-1.jpg），它會中斷（圖像完全消失，不會返回）。 – huzzah

肯定它會破壞你的其他綁定，你需要將綁定添加到新的內容中，或者使用'.on（）'將事件處理器委託給更高級別的鏈。要刪除FOUC，你需要將它們定位。 – Sinetheta

工作正常！（雖然現在我的CSS在瀏覽器之間有些不可思議，但是我會找出那個）非常感謝！ – huzzah

圖像交換與JQuery之間的定時轉換？

回答

相關問題