Question

当我将图像放大时，我制作了一个小图库，我希望这些图像能够轻松地将图像缩小回来，而不是在我徘徊时立即显示，我可以实现吗？

这是代码：

#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
    });

    n.bind("mouseleave", function () {
        $(this).stop(true).remove()
    });
});

}); 
    </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>

Answer 1

我相信你可以通过在动画函数中使用缓动属性来做到这一点。这是full documentation ..

示例1：

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    width: [ "toggle", "swing" ],
    height: [ "toggle", "swing" ],
    opacity: "toggle"
  }, 5000, "linear", function() {
    $( this ).after( "<div>Animation complete.</div>" );
  });
});

示例2：

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<div>Animation complete.</div>" );
    }
  });
});

<强>编辑：

.animate({
    width: 300,
    height: 280
}, 300, "linear");

Answer 2

实际上，唯一缺少的是在将.animate({})绑定到当前对象之前，必须保存原始宽度和高度。

这就是这样的：

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

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

我制作了一个JSFiddle，你可以尝试一下：http://jsfiddle.net/jpreynat/4e6po8z3/

使图像在悬停时缓和

2 个答案: