Как я могу показать контент помимо изображения при нажатии на него и показать оба в обертке с помощью jQuery - PullRequest
Новая
       16

Как я могу показать контент помимо изображения при нажатии на него и показать оба в обертке с помощью jQuery

1 голос
/ 25 января 2012

Я хочу показать описание продукта при нажатии на изображение продукта, и оно будет отображаться изящно с правильным фоном, но без всплывающего окна.Изображение должно быть в том же месте, только контент должен выходить из фона, и должно появиться окно, которое будет содержать и изображение, и описание, я попробовал некоторый код, но он не работает должным образом. 

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

Он показывает содержание, но быстро и не так, как мне требуется.Ссылкаhttp://www.nokia.com/in-en/products/all-products/ Это должно выглядеть так.

Ответы [ 2 ]

1 голос
/ 25 января 2012

Вместо того, чтобы перемещать HTML, дублировать и заменять контент, я просто создаю контент один раз и скрываю его, а затем показываю его с анимацией:

http://jsfiddle.net/FP2z9/1/

$(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);
        }
    });
});
1 голос
/ 25 января 2012

Крутая проблема ... это происходит потому, что скопированный wrapper2 не скрыт перед запуском анимации.После того, как вы скопируете и добавите его, он уже виден.Просто спрячьте это сначала, и тогда ваша анимация будет работать: 

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

Будьте осторожны: теперь есть 2 wrapper2 элементов, один видимый и один скрытый ... убедитесь, что это не приведет к будущемупроблемы;)

...