0

フェードインとフェードアウトして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>
4

1 に答える 1

0

おそらく、2つの画像を重ねて使用し、jQueryのfadeToggleを使用して2つの画像間を回転します。

このようなもの（http://jsbin.com/ibofis/12/edit）でうまくいくかもしれません。また、上にあるものをフェードインおよびフェードアウトするように変更して、それぞれのfadeToggleの2番目のインスタンスを削除することもできます。

于 2012-11-08T15:08:05.690 に答える