我有一个图像我想淡入淡出然后显示一个 Div。然后当单击时淡出回到上一个图像并隐藏 Div。它可以完美地显示 div,但反之则不起作用。任何帮助,将不胜感激。谢谢!
<div id="calcDrop"><img id="plusCalc" height="33px" align="left" class="plusCalc changePad" alt="plusButton" src="/sites/aerialist.localhost/files/images/calculator/plusBig300.jpg" />
<img height="34px" align="left" class="changePad" alt="Calculate Price" src="/sites/aerialist.localhost/files/images/calculator/calcDrop300.jpg" />
</div>
<script>
jQuery(document).ready(function(){
jQuery('.plusCalc').click(function(){
jQuery('.plusCalc').stop().animate({opacity:'0'},function(){
jQuery('.plusCalc').attr('src', '/sites/aerialist.localhost/files/images/calculator/minusBig300.jpg');
jQuery('.plusCalc').attr('class', 'minusCalc');
}).load(function(){
jQuery('.minusCalc').stop().animate({opacity:'1'});
});
jQuery("#calculatorDiv").show('slow');
});
jQuery('.minusCalc').click(function(){
jQuery('.minusCalc').stop().animate({opacity:'0'},function(){
jQuery('.minusCalc').attr('src', '/sites/aerialist.localhost/files/images/calculator/plusBig300.jpg');
jQuery('.minusCalc').attr('class', 'plusCalc');
}).load(function(){
jQuery('.plusCalc').stop().animate({opacity:'1'});
});
jQuery("#calculatorDiv").hide('slow');
});
});
</script>