如何在单击图像的同时显示图像以外的内容，并使用jQuery在包装器中同时显示两者

我想显示产品的描述，当我点击产品图片，它将显示适当的背景优雅，但不是弹出窗口。图像应该在同一个地方，只是内容应该出来的背景和一个框应该出现，其中将包含图像和描述，我尝试了一些代码，但它不是工作所需的

<div class="test-wrap">
    <div class="wrapper1">
        <img src="C02-06-front-png.png" alt="Nokia" />
    </div>
    <a href="#" class="tst">Click Here</a>
</div>


<div class="content-wrap">

    <div class="wrapper2">
        <img src="C02-06-front-png.png" alt="Nokia" />
        <div class="content">
            Lorem ipsum dolor sit Amet
        </div>
    </div>

</div>

<style>
    .content-wrap {
        position: relative;
        display: none;
        height: 250px;
        width: 400px;
        background: yellow;
    }
    .test-wrap {
        position: relative;
        height: 250px;
        width: 400px;
    }
    .content-wrap img,
    .test-wrap img {
        float: left;
    }
    .test-wrap .tst {
        position: absolute;
        bottom: 0;
        right: 0;
        display: block;
    }
    .content {
        float: left;
        width: 200px;
    }       
    .test-wrap .wrapper2 {
        background: yellow;
        height: 250px;
        width: 400px;
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        $('.tst').click(function() {
            //$('.content-wrap').show(5000);    
            var content = $('.content-wrap').html();
            $('.test-wrap').append(content);
            $('.wrapper1').remove();
            $('.tst').remove();
            $('.wrapper2').show(5000);
        });
    });
</script>

Lorem ipsum dolor sit Amet
.内容包装{
位置：相对位置；
显示：无；
高度：250px；
宽度：400px；
背景：黄色；
}
.测试包{
位置：相对位置；
高度：250px；
宽度：400px；
}
.content wrap img，
.测试包img{
浮动：左；
}
.test wrap.tst{
位置：绝对位置；
底部：0；
右：0；
显示：块；
}
.内容{
浮动：左；
宽度：200px；
}       
.测试包装。包装2{
背景：黄色；
高度：250px；
宽度：400px；
}
$（文档）.ready（函数（）{
$（'.tst'）。单击（函数（）{
//$（'.content wrap'）.show（5000）；
var content=$（'.content wrap'）.html（）；
$（'.test wrap'）。追加（内容）；
$（'.wrapper1'）.remove（）；
$（'.tst'）.remove（）；
$（'.wrapper2'）.show（5000）；
});
});

它显示的内容，但很快，而不是我所需要的。裁判。

---

看起来应该是这样的。

很酷的问题……之所以发生这种情况，是因为在开始动画之前，复制的

包装器2

没有隐藏。在复制并附加它之后，它就已经可见了。只需先将其隐藏，动画即可工作：

<script type="text/javascript">
    $(document).ready(function() {
        $('.tst').click(function() {
            //$('.content-wrap').show(5000);    
            var content = $('.content-wrap').html();
            $('.test-wrap').append(content);
            $('.wrapper1').remove();
            $('.tst').remove();

            // hide first..!
            $('.wrapper2').hide();
            $('.wrapper2').show(5000);
        });
    });
</script>

$（文档）.ready（函数（）{
$（'.tst'）。单击（函数（）{
//$（'.content wrap'）.show（5000）；
var content=$（'.content wrap'）.html（）；
$（'.test wrap'）。追加（内容）；
$（'.wrapper1'）.remove（）；
$（'.tst'）.remove（）；
//先躲起来。。！
$（'.wrapper2'）.hide（）；
$（'.wrapper2'）.show（5000）；
});
});

---

但是要小心：现在有2个

wrapper2

元素，一个可见，一个隐藏……确保这不会导致将来的问题；）

与其四处移动HTML并复制和替换内容，我只需创建一次内容并将其隐藏，然后用动画显示：

---

是的，我也这么做了，克里斯，但问题是，我想在显示内容的同时显示图像。图像不应隐藏。它应该总是在那里，内容应该从背景中出来。嗯……我不确定为什么图像不会显示出来，但我认为解决这个问题的最好方法，而不是试图修复代码，是先创建内容，让它看起来正确，然后隐藏它，制作动画，与其尝试“动态”创建代码并附加代码，希望它能正常工作……有意义吗？更好的解决方案……你应该采用这种方法，帕特尔先生。

$(function() {
    $('img').click(function() {
        var wrapper = $(this).closest(".wrapper");
        if (wrapper.hasClass("detail")){
            wrapper.removeClass("detail").animate({
                width: 161
            }, 300);
        }
        else {
            wrapper.addClass("detail").animate({
                width: 326
            }, 300);
        }
    });
});