简单的JQuery图像淡出淡出有麻烦

时间:2012-11-08 01:10:42

标签: jquery html

我有一个想要淡入淡出然后显示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>

1 个答案:

答案 0 :(得分:0)

我可能只是使用两个位于彼此顶部的图像,然后使用jQuery的 fadeToggle 在两者之间轮换。

这样的事情(http://jsbin.com/ibofis/12/edit)可能会成功。您也可以将其更改为淡入和淡出顶部的一个,删除每个上的 fadeToggle 的第二个实例。