فتح توسيع/إغلاق العودة إلى الأحجام الأصلية سلسلة من الصناديق مع تلاشي الصورة

Question

لدي سلسلة من المربعات القابلة للنقر.أحتاج إلى أن أكون قادرًا على توسيع الصناديق وإخفاء الصورة الخاصة بها.أحتاج أيضًا إلى أن أكون قادرًا على إغلاق الملف المفتوح السابق وإعادته إلى ارتفاعه الأصلي وعرضه المحدد بينما يتلاشى مرة أخرى في الصورة. .info تحميل محتوى اياكس

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

المغلق، وأنا لا أعرف الارتفاع.

.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

هذا هو الكود النهائي الذي يعمل:

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

كانت هناك بعض الأخطاء النحوية، كما ذكر @Diodeus.يجب عليك دائمًا استخدام مصحح الأخطاء أولاً لمعرفة ذلك.

كان لديك أيضا if(box.hasClass(".opened")) وهذا خطأ (لا يجب إضافة نقطة قبل الفصل هناك).كان لديك أيضا box.addClass('opened'); قبل ذلك بقليل if, ، مما يعطل الوظيفة (يجب عليك إضافة/إزالة الفصل عند إظهار/إخفاء المحتوى، وليس في أي مكان آخر).

هل هذا هو ما كنت تبحث عنه؟

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

  });
});

​