Jquery 使图像在悬停时轻松无误_Jquery_Jquery Animate

Jquery 使图像在悬停时轻松无误

jquery

Jquery 使图像在悬停时轻松无误,jquery,jquery-animate,Jquery,Jquery Animate,我制作了一个小的图像库，当悬停在一个图像上时它会放大，当悬停在一个图像上时它会恢复到正常大小，不幸的是，我的悬停功能不能很好地工作，我不知道如何处理它，下面是代码和它如何处理bug #main{ width: 1000px; height: 720px; border-bottom-style: solid; border-left-style: solid; border-right-style:

我制作了一个小的图像库，当悬停在一个图像上时它会放大，当悬停在一个图像上时它会恢复到正常大小，不幸的是，我的悬停功能不能很好地工作，我不知道如何处理它，下面是代码和它如何处理bug

        #main{
        width: 1000px;
        height: 720px;
        border-bottom-style: solid;
        border-left-style: solid;
        border-right-style: solid;
        border-radius: 7px;
        border-color:silver


    }

    #title{
        position:relative;
        width:679px;
        font-size: 26px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-weight: bold;
        left:-4px;
        top:121px;
        border: solid;
        background-color:silver;
        text-align:center;
        z-index:-100;


    }
    #MainImage{
        background-image: url('zlf246.jpg');
        position:relative;
        width: 680px;
        height: 560px;
        margin-left: 155px;
        background-repeat: no-repeat;
        z-index:-200;
        border-bottom-style: solid;
        border-left-style: solid;
        border-right-style: solid;
        border-radius: 7px;
        border-color:silver

    }

        #PicGallaryR {
        width: 150px;
        height: 560px;
        float: right;
        direction: rtl;

    }

        #PicGallaryL {
        width: 150px;
        height: 560px;
        float: left;

    }

        #PicGallaryB {
        width: 993px;
        height: 145px;

    }
        a, .imgArt {
        width:150px;
        height:140px;

    }

    </style>
        <script>

    $(function () {
    $(".imgArt").bind("mouseenter", function () {

        var n = $(this).clone();
        var of = $(this).offset();
        var isRight = $(this).closest("div").attr("id") == "PicGallaryR";
        var options = {
            position: 'absolute',
            top: of.top,
            margin: 0
        };
        if (isRight) options["right"] = 918;
        else options["left"] = of.left;
        n.css(options)
            .appendTo($("#main"))
            .animate({
            width: 300,
            height: 280
        });

var originalWidth = $(this).css('width');
var originalHeight = $(this).css('height');

n.bind("mouseleave", function () {
    $(this).animate({
        width: originalWidth,
        height: originalHeight
    }, 300, "linear");
});
    });

    }); 
        </script>
    </head>


    <body>  

        <div id="main">
            <div id="PicGallaryL">
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
            </div>
        <div id="PicGallaryR">
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>

        </div>
        <div id="MainImage">
            <div id="title">Sterling silver ethnic filigree ring, Yemenite Art</div>

        </div>
        <div id="PicGallaryB">
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>


        </div>


    </div>
    </body>

    </html>

它是特定的浏览器吗？它也发生在chrome上吗？在chrome上，任何想法？？对我来说在chrome上都很好。你能详细解释一下发生了什么事吗？我无法复制该问题。在这里，请查看代码中的文本，播放图像，来回播放，尤其是右侧的图像，播放一段时间后，图像停止放大