Öffnen Erweitern / Schließen zurück zu Originalgrößen Eine Reihe von Boxen mit Img Fade

Question

Ich habe eine Reihe von anklickbaren Feldern.Ich muss in der Lage sein, die Boxen zu erweitern und ihre Bilder zu verbergen.Ich muss auch in der Lage sein, das zuvor geöffnete zu schließen, indem ich es auf seine ursprüngliche Höhe und definierte Breite zurückbringe, während ich es wieder einblende..info lädt Ajax-Inhalte

<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>

Das CSS, ich kenne die Höhe nicht.

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

.info {
  height: auto;
  width: auto;
}

Ich habe es versucht

$(".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

Dies ist mein endgültiger Code, der funktioniert:

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

                                });
                    });
            });
            };
        });
});
  });

Answer 2

Es gab einige Syntaxfehler, wie @Diodeus erwähnt hat.Sie sollten immer zuerst einen Debugger verwenden, um dies herauszufinden.

Sie hatten auch einen falschen if(box.hasClass(".opened")) (Sie sollten dort keinen Punkt vor der Klasse einfügen).Sie hatten auch box.addClass('opened'); kurz vor diesem if, der die Funktionalität beeinträchtigt (Sie sollten die Klasse hinzufügen / entfernen, wenn Sie den Inhalt ein- / ausblenden, nirgendwo anders).

Haben Sie danach gesucht?

    $(".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 3

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

  });
});