簡體   English   中英

我有9個小圖像,當單擊它們時,它們會在圖像的較大版本中消失。 為什么不能在Browser(FF)中工作)

[英]I have 9 small images that when clicked on, will fade in the bigger version of the image. Why wont work in Browser(FF))

<style type="text/javascript" src="jquery-1.11.0.min.js"></style>
<style type="text/javascript" src="myCode.js"></style>
</body> //jquery is within my site directory on my desktop


$(document).ready(function(){
//note:
$("#artShow,#changreImage,#clasziImage,#comicImage,#planetImage,#dragonImage,#wineImage,#underwaterImage,#catImage").mouseenter(function(){
$(this).animate({height:"125px",width:"136px"});
    });
$("#artShow,#changreImage,#clasziImage,#comicImage,#planetImage,#dragonImage,#wineImage,#underwaterImage,#catImage").mouseleave(function(){
$(this).animate({height:"118px",width:"129px"});
    });

// note:懸停功能

//當用戶使用先前的圖像懸停功能單擊小圖像時,該圖像上的較大版本應淡入//

$("#big").hide();
    $("#artShow").click(function(){
        $("#big").fadeIn(2000);
            $("#big").click(function(){
                $("#big").fadeOut(2000);
                });

    });

        $("#big2").hide();
    $("#changreImage").click(function(){
        $("#big2").fadeIn(2000);
            $("#big2").click(function(){
                $("#big2").fadeOut(2000);
                });
    });

            $("#big3").hide();
        $("#clasziImage").click(function(){
            $("#big3").fadeIn(2000);
                $("#big3").click(function(){
                    $("#big3").fadeOut(2000);
                });
        });

            $("#big4").hide();
            $("#comicImage").click(function(){
                $("#big4").fadeIn(2000);
                    $("#big4").click(function(){
                        $("#big4").fadeOut(2000);
                    });
                });

                    $("#big5").hide();
                    $("#planetImage").click(function(){
                        $("#big5").fadeIn(2000);
                            $("#big5").click(function(){
                                $("#big5").fadeOut(2000);
                            });
                        });

                            $("#big6").hide();
                            $("#dragonImage").click(function(){
                                $("#big6").fadeIn(2000);
                                    $("#big6").click(function(){
                                        $("#big6").fadeOut(2000);
                                    });
                                });

                                    $("#big7").hide();
                                    $("#wineImage").click(function(){
                                        $("#big7").fadeIn(2000);
                                            $("#big7").click(function(){
                                                $("#big7").fadeOut(2000);
                                            });
                                        });

                                            $("#big8").hide();
                                            $("#underwaterImage").click(function(){
                                                $("#big8").fadeIn(2000);
                                                    $("#big8").click(function(){
                                                        $("#big8").fadeOut(2000);
                                                    });
                                                });

                                                    $("#big9").hide();
                                                    $("#catImage").click(function(){
                                                        $("#big9").fadeIn(2000);
                                                            $("#big9").click(function(){
                                                                $("#big9").fadeOut(2000);
                                                            });
                                                        });

});

<style type="text/javascript" src="jquery-1.11.0.min.js"></style>
<style type="text/javascript" src="myCode.js"></style>

不應該是:

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="myCode.js"></script>

標簽應該是script

<script type="text/javascript" src="jquery-1.11.0.min.js"></script >
<script type="text/javascript" src="myCode.js"></script>
</body> //jquery is within my site directory on my desktop


$(document).ready(function(){
    //note:
    $(".img")
        .mouseenter(function(){ 
            $(this).animate({height:"125px",width:"136px"});
         })
        .mouseleave(function(){
            $(this).animate({height:"118px",width:"129px"});
         });
});

myCode.js

$(document).ready(function(){

    $(".big-img").hide();
    $(".img").click(function(){
        var id = $(this).data(id);
        $("#"+id)
            .fadeIn(2000)
            .click(function(){
                $(this).fadeOut(2000);
            });

    });

});

HTML圖片

<img class="img" src="" data-id="artShow">
<img class="big-img" src="" id="artShow" >

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM