问题
I have a series of clickable boxes. I need to be able to expand the boxes and hide its img. I also need to be able to close previous opened one taking it back to its original height and defined width while fading back in its img. .info
loads ajax content
<div class="box">
<img src="#" />
<div class="info"></div>
</div>
<div class="box">
<img src="#" />
<div class="info">Ajax load content</div>
</div>
<div class="box">
<img src="#" />
<div class="info">Ajax loads content</div>
</div>
The css, i don't know the height.
.box {
width: 230px;
height: auto;
}
.info {
height: auto;
width: auto;
}
I tried
$(".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'));
});
});
回答1:
There were a few syntax errors, like @Diodeus has mentioned. You should always use a debugger first to find out.
You also had if(box.hasClass(".opened"))
which is wrong (you shouldn't add a dot before the class there). You also had box.addClass('opened');
just before that if
, which breaks the functionality (you should add/remove the class when you show/hide the content, nowhere else).
Is this what you were looking for?
$(".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");
}
});
});
回答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");
};
});
});
回答3:
This is my final code which works:
$(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;
});
$('<a href="#" class="closeBox">Close</a>"').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 = $('<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);
});
});
});
};
});
});
});
来源:https://stackoverflow.com/questions/9331498/open-expand-close-back-to-original-sizes-a-series-of-boxes-with-img-fade