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

The function toggle creates a class “.open” that changes the image width from a cropped width to its full width. In my CSS I specify that images have an opacity of 0.5 that is changed to an opacity of 1 on mouseover. I also want the opacity to change to 1 for images with the class “open” but when I do .open { opacity: 1 } in the CSS it has no impact. How can I modify my function so that when the class “open” is applied the image opacity changes to 1, and when the class “open” is removed it goes back to 0.5? Thanks

Answer 1

Something like this might help:

//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);
      })
});

hope it helps