假设淡入淡出,您的意思是动画淡入淡出,您可以使用以下代码:
HTML:
<div id="something" class="theImage" style="height: 242px; width: 194px; background: url(http://i.imgur.com/QW15C.png);">
<img src="http://i.imgur.com/SOd1W.png" />
</div>
<div id="somethingElse" class="theImage" style="height: 242px; width: 194px; background: url(http://i.imgur.com/QW15C.png);">
<img src="http://i.imgur.com/SOd1W.png" />
</div>
jQuery:
$(document).ready(function(){
$('.theImage img').click(function(){
var current = ($(this).parent().attr('id') == 'something') ? 'somethingElse' : 'something';console.log(current);
$(this).fadeOut();
$('#'+current + ' img').fadeIn();
});
});
这将显示开始时的默认图像,然后在单击时淡出以显示其容器的背景图像。您可以根据自己的情况决定使用不同的 HTML 元素。