0

我正在尝试创建一个包含 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>
4

2 回答 2

0

你写了一些乱七八糟的代码：）我需要一点时间来正确格式化它：

$(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');
        }
    });
});

魔术stop(true,true)功能将完成这项工作。您需要删除动画队列并停止当前动画（两个为真）。如果你这样做，动画就会顺利而甜蜜。

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

还有一件事，记住：局部变量是你最好的朋友。每次您需要多次使用某些东西时使用它们。当您编写$('.image')时，首先需要相对较长的时间才能找到 DOM 中的每个类，然后每次调用选择器时创建一组又大又胖的 jQuery 对象。问题在于对整个文档进行类搜索并不止一次地创建一组 jQuery 对象。如果可以的话，至少缩小选择器搜索范围：

 $("#imageContainer").find(".image")
于 2013-10-29T00:42:58.090 回答
0

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

  <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>
于 2013-10-31T03:39:46.780 回答