Question

function toggle() {
  if ($(this).is(".open")) {
    $(this).animate({
      width: 400
    }, 500);
  } else {
    $(this).animate({
      width: $(this).data("width")
    }, 500);
  }
  $(this).toggleClass("open");
}
$("#portfolio_img1").click(function() {
  if (!$(this).data("width")) {
    var img = new Image();
    var _this = $(this);
    img.onload = function() {
      _this.data("width", this.width);
      toggle.call(_this);
    }
    img.src = $(this).css("backgroundImage").replace("url(\"", "").replace("\")", "");
  } else {
toggle.call(this);
  }
});

函数toggle创建一个类“.open”，将图像宽度从裁剪宽度更改为其全宽。在我的CSS中，我指定图像的不透明度为0.5，在鼠标悬停时更改为不透明度为1。我还希望不透明度对于“打开”类的图像更改为1，但是当我在CSS中执行.open { opacity: 1 }时它没有任何影响。如何修改我的功能，以便在应用“打开”类时，图像不透明度变为1，当“打开”类被删除时，它会回到0.5？感谢

Answer 1

这样的事情可能有所帮助：

//change from hover to check for class open in your case
$(this).hover(
      function() {
          $(this).stop().animate({ opacity: 1.0 }, 800);
      },
      function() {
          $(this).stop().animate({ opacity: 0.5 }, 800);
      })
});

希望有所帮助

修改简单的jquery函数以更改图像不透明度

1 个答案: