打开扩展/关闭原始尺寸一系列带有img淡入淡出的盒子

我有一系列可点击的盒子。 我需要能够扩展框并隐藏其img。 我还需要能够关闭先前打开的一个，将其恢复到原始高度并定义宽度，同时淡化其img。 .info加载ajax内容

 
  
 
 
  
Ajax load content
 
 
  
Ajax loads content
  

css，我不知道高度。

 .box { width: 230px; height: auto; } .info { height: auto; width: auto; } 

我试过了

 $(".box").each(function(){ var box = $(this); box.data('height', $(this).height()); box.click(function(){ box.addClass("opened"); if(box.hasClass("opened"){ $("img", this).fadeOut("slow", function(){ box.css("width", "600"); box.css("height", "500"); box.removeClass("opened"); }); } else { $("img", this).fadeIn("slow"); box.width(230); box.height(box.data('height')); }); }); 

Answer 1

有一些语法错误，比如@Diodeus提到过。 您应该首先使用调试器来查找。

你也有if(box.hasClass(".opened"))这是错误的（你不应该在那里的类之前添加一个点）。 你也有box.addClass('opened'); 就在那之前， if ，这打破了function（你应该在显示/隐藏内容时添加/删除类，在其他地方）。

这是你在寻找什么？

  $(".box").each(function(){ var box = $(this); box.data('height', $(this).height()); box.click(function(){ if(!box.hasClass("opened")){ $("img", box).fadeOut("slow", function(){ box.css("width", "600"); box.css("height", "500"); box.removeClass("opened"); }); } else { $("img", box).fadeIn("slow"); box.width(230); box.height(box.data('height')); box.addClass("opened"); } }); });​ 

Answer 2

http://jsfiddle.net/uFz5A/

 $(".box").each(function(){ var box = $(this); box.data('height', $(this).height()); box.click(function(){ if(box.hasClass("opened")){ $("img", box).fadeOut("slow", function(){ box.css({"width":"600","height":"500"}); box.removeClass("opened"); }); } else { $("img", box).fadeIn("slow"); box.width(230); box.height(box.data('height')); box.addClass("opened"); }; }); }); 

Answer 3

这是我的最终代码：

 $(function(){ //run the function for all boxes $(".box").each(function () { var item = $(this); var thumb = $("a", item); var infoBox = $(".info", item); thumb.click(function(e) { e.preventDefault(); $(".box").removeClass("opened"); $(".info").empty(); $(".box a").fadeIn("slow"); $(".info").css({ "width": "auto", "height": "auto" }); $(".box a").css("width", "230"); $(".box a").css("height", "auto"); $(".box").css("width", "230"); $(".box").css("height", "auto"); item.addClass("opened"); if (item.hasClass("opened")) { var url = this.href; thumb.fadeOut("slow"); infoBox.css({ "visibility": "visible", "height": "auto" }); infoBox.load(url, function () { var newHeight = infoBox.outerHeight(true); $(".readMore", item).click(function (e) { var selector = $(this).attr('data-filter-all'); $('#container').isotope({ filter: selector }); $('#container').isotope('reloadItems'); return false; }); $('Close"').appendTo(infoBox).click(function (e) { e.preventDefault(); $("html, body").animate({scrollTop: 0}, 500); $('#container').isotope('reLayout'); }); item.animate({ "width": "692", "height": newHeight }, 300); thumb.animate({ "width": "692", "height": newHeight }, 300); infoBox.animate({width: 692, height: newHeight}, function () { $('#container').isotope('reLayout', function () { Shadowbox.setup(); item.removeClass("loading"); infoBox.css({ "visibility": "visible" }); var videoSpan = infoBox.find("span.video"); iframe = $('', { 'frameborder': 0, 'class': 'tide', 'width': '692', 'height': '389', 'src': 'http://player.vimeo.com/video/' + videoSpan.data("vimeoid") + '?autoplay=0&api=1' }); videoSpan.replaceWith(iframe); }); }); }); }; }); }); });