Question

我正在尝试创建一个包含4张图片的图库。当鼠标中心时，图像略有增加。它工作正常，但图像没有按比例放大或缩小。图像不会缩放回原始大小，即（h）200px（w）267px。谢谢！

$(document).ready(function(){
           $('.image').width(267);
           $('.image').mouseenter(function()
           {
              $(this).css("cursor","pointer");
              $(this).animate({width: "60%", height:"60%"}, 'slow');
           });

        $('.image').mouseleave(function()
          {   
              $(this).animate({width: "267px"}, 'slow');
           });
       });

      </script>
    </head>

    <body>
    <div id="container">
      <h2>Gallery Test</h2>
      <hr />
      <div id="content">
      </div>
      <div id="gallery">
        <img class="image" src="images/one.jpg" height="200px" width="267px">
        <img class="image" src="images/two.jpg" height="200px" width="267px">
        <img class="image" src="images/three.jpg" height="200px" width="267px">
        <img class="image" src="images/four.jpg" height="200px" width="267px">
      </div>
        </div>

Answer 1

你写了一些杂乱的代码:)我需要一点时间来正确格式化它：

$(document).ready(function(){
    var width = 267;
    var height = 200;
    var w2 = width*0.6;
    var h2 = height*0.6;
    var image = $('.image');
    image.css({
        width:width,
        cursor: pointer,
    });

    image.on({
        mouseenter: function(){
            $(this).stop(true,true).animate({width: w2, height:h2}, 'slow');
        },
        mouseleave: function(){
            $(this).stop(true,true).animate({width: width, height:height}, 'slow');
        }
    });
});

Magic stop(true,true)功能将完成这项工作。您需要删除动画队列并停止当前动画（两个真实）。如果你这样做，动画将顺利而且可爱。

代码中的另一个错误是设置宽度和高度百分比。在动画中间，基本宽度将与动画结束时的基本宽度不同。这就是我宣布局部变量的原因。

还有一件事，请记住：本地变量是你最好的朋友。每次需要使用多次时使用它们。当您编写$('.image')时，首先需要相对年龄来查找DOM中的每个类，然后在每次调用selector时创建一组大而胖的jQuery对象。问题在于对整个文档进行类搜索并多次创建一组jQuery对象。如果可以的话，至少要用这样的东西缩小选择器搜索范围：

 $("#imageContainer").find(".image")

Answer 2

它仍然有点跳跃。我甚至减少了图像的大小，假设这是问题。当我将鼠标悬停在所有图像上时，它并不顺畅。那是什么时候它变得有弹性。图像开始闪烁。知道为什么会这样吗？

  <script>
$(document).ready(function(){
    var width = 100;
    var height = 134;
    var w2 = width*2;
    var h2 = height*2;
    var image = $('.image');
    image.css({
        width:"width",cursor: "pointer"});

    image.on({
        mouseenter: function(){
            $(this).stop(true,true).animate({width: w2, height:h2}, 'slow');
        },
        mouseleave: function(){
            $(this).stop(true,true).animate({width: width, height:height}, 'slow');
        }
    });
});
  </script>
</head>

<body>
<div id="container">
  <h1>IT 411</h1>

  <hr />
  <div id="content">
  </div>
  <div id="gallery">
    <img class="image" src="images/one.jpg" height="134px" width="100px">
    <img class="image" src="images/two.jpg" height="134px" width="100px">
    <img class="image" src="images/three.jpg" height="134px" width="100px">
    <img class="image" src="images/four.jpg" height="134px" width="100px">
  </div>
    </div>

Jquery 4图片库

2 个答案: