Расширение div с помощью jQuery без перемещения плавающих в него div - PullRequest
Новая
       2

Расширение div с помощью jQuery без перемещения плавающих в него div

1 голос
/ 22 ноября 2011

Я пытаюсь получить эффект, подобный тому, что вы можете найти в http://www.nokiausa.com/us-en/products/ с сеткой базовой информации, где щелчок расширяет информацию по соседнему элементу.

Одна проблема, с которой я сталкиваюсь, заключается в том, что расширение моего div заставляет соседний div двигаться - я думаю, что мне, возможно, придется использовать функцию clone, чтобы создать ребенка с абсолютным позиционированием, но я не уверен, как бы я это сделал . 

<head>
<script src="jquery-1.7.min.js"></script>
<script src="jquery.color.min.js"></script>
<script type="text/javascript">
    function growRight(){
        $('#stuff1').animate({
            backgroundColor: "#FF8600"
        }, 750 );
        $('#stuff1').animate({
            width: "510px"
        }, 750, function() {});
    }

</script>
<style>
    ul{
    display:block;
    width:520px;
    background-color:#888888;
    }

    li{
    position:relative;
    overflow:hidden;
    display:block;
    float:left;
    height:250px;
    width:250px;
    background-color:#B8B8B8;
    margin:5px;
    }

    p{
    display:block;
    }

    div.contentright{
    position:absolute;
    top:0px;
    left:250px;
    width:260px;
    height:250px;
    }

    .clearLeft{
    clear:left;
    }
</style>
</head>
<body>
<ul id="gridbox">
    <li class="stuff" id="stuff1">
        <a href="javascript:growRight()">Stuff 1</a>
        <div class="contentright">
            This is a load of content. Content content content.
        </div>
    </li>
    <li>
        Stuff 2
    </li>
    <li>
        Stuff 3
    </li>
    <li>
        Stuff 4
    </li>
</ul>
</body>

Ответы [ 4 ]

2 голосов
/ 11 февраля 2014

Это то, что вы имели в виду?

Пожалуйста, извините за ужасное форматирование, я написал это быстро

http://jsfiddle.net/y3QBw/5/

var li_original_height = $('#stuff1').css('z-index');

function growRight() {
    var $stuff = $('#stuff1'),
        li_left = $stuff.offset().left,
        li_top = $stuff.offset().top,
        li_stuff_width = $stuff.outerWidth(true) + 5,
        $sibling = $stuff.next();

    $sibling.css('margin-left', li_stuff_width);
    $stuff
        .css({
            'z-index': 1000,
            background: '#588EC8',
            position: 'fixed',
            top: li_top,
            left: li_left,
            margin: 0
        })
        .animate({
            width: "510px"
        }, 750, function() {});
}

function hideRight() {
    var $stuff = $('#stuff1'),
        $sibling = $stuff.next();

        $stuff.animate({
            width: "250px"
        }, 750, function() {
            $stuff.css({
                'z-index': li_original_height,
                background: '#B8B8B8',
                position: 'relative',
                top: 'auto',
                left: 'auto',
                margin: 5
           });
            $sibling.css('margin-left', 5);
        });

}

$('#stuff1 a').toggle(
    function () {
        growRight(); 
        return false;
    },
    function () {
        hideRight(); 
        return false;
    }
);
2 голосов
/ 22 ноября 2011

На мой взгляд, это требует некоторого умного использования position:absolute. z-index устанавливает только порядок элементов, которые будут отображаться друг на друге.

1 голос
/ 22 ноября 2011

Хорошо, мне удалось найти решение, которое в значительной степени соответствует подходу, который я упомянул в вопросе - это клонирует ячейку, которая, в свою очередь, оживляет.Свойства CSS гарантируют, что «expandinatorright» находится абсолютно поверх его родителя (конечно, с z-index, гарантирующим, что он отображается выше всего остального). 

    function growRight(){
        $('.stuff')
            .clone(false)
            .addClass('expandinatorright')
            .appendTo($('.stuff'));
        $('.expandinatorright').animate({
            backgroundColor: "#FF8600"
        }, 750 );
        $('.expandinatorright').animate({
            width: "510px"
        }, 750, function() {});
    }

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

0 голосов
/ 22 ноября 2011

Просто сделав быстрый удар по этому, я бы предложил, чтобы перед анимацией, добавьте свойство z-index к элементу, который вы хотите увеличить. Это должно заставить его пройти над соседним элементом и скрыть его вместо того, чтобы толкать его вниз.

Что-то вроде: 


function growRight(){
        $("#stuff1").css("z-index","5");
        $('#stuff1').animate({
            backgroundColor: "#FF8600"
        }, 750 );
        $('#stuff1').animate({
            width: "510px"
        }, 750, function() {});
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...