javascript - 仅在第一次点击时实现点击动画？

Question

我有多个带有rel="<img src"#"/>".

当我单击 any<a></a>时，我会在另一个 div 中显示一个大图像，其rel值使用淡入效果。

我想要做的是检查大图像是否与锚点相同，如果是则阻止src效果。relfadeIn

 $(document).ready(function () {

   $("a.largeimg").click(function () {
     var image = $(this).attr("rel");           
     $('.main-product-image').html('<img src="' + image + '"/>');
     $('.main-product-image img').hide();
     $('.main-product-image img').fadeIn();
     return false;

     if(src == image) {

      $('.main-product-image img').show();

     }

   });

Answer 1

您可以检查锚的 rel 和图像的 src 是否相同，如果是，则在代码淡入之前转义函数，如下所示：

var src = $('.main-product-image img').attr("src");
if (src == image) return false;

Answer 2

如果我正确理解您的问题，则在动画之前您需要确认src图像的属性是否等于rel单击元素的属性，从而阻止动画！

查询

$(document).ready(function () {

  // use bind when targeting many elements
  $("a.largeimg").bind("click", function () {

    var $target = $('.main-product-image'),         // target element
        src     = $target.find('img').attr("src"),  // src from existent image
        image   = $(this).attr("rel");              // rel from clicked element

    // if src different from image
    if (src != image) {
      $target.html('<img src="' + image + '"/>');   // append new image
      $target.find('img').hide().fadeIn();          // perform the animation
    }

    // prevent the browser from continuing to bubble the clicked element
    return false;
  });
});

附言：

未经测试，但应该可以正常工作！