只在第一次点击时点击即可实现动画?

时间:2012-05-24 00:44:07

标签: javascript jquery

我有多个锚标签,其中包含rel="<img src"#"/>"

当我点击任何<a></a>时,我会使用fadeIn效果在rel值的另一个div中显示一个大图像。

我想要做的是检查大图像是否与锚点的src具有相同的rel,如果是,则阻止fadeIn效果。

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

     }

   });

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

如果我理解你的问题是正确的,那么在动画之前你需要确认图像的src是否等于被点击元素的rel属性,从而阻止了动画!

<强> JQUERY

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

<强> PS:

未经测试,但应该可以正常使用!