CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

jQuery - Expand div and make no other one move

I have some divs and have some effects on it thorugh jQuery. When I hover over a div it expands. But then the divs beside and beneath it move along with it. I want the same effect like the expandable user card given on stackoverflow after 1k repuration.

This is what I have done.

JS:

$(document).ready(function () {
    var delay = 1000;
    $(".user").hover(function () {
        $(this).css("background-color", "#eee");
        $(this).delay(delay).animate({
            width: '350px',
            height: '200px'
        });
        $(this).find("img").delay(delay).animate({
            marginTop: '+=5px',
            marginLeft: '+=5px'
        });
    }, function () {
        $(this).css("background-color", "#fff");
        $(this).delay(delay).animate({
            width: '300px',
            height: '50px'
        });
        $(this).find("img").delay(delay).animate({
            marginTop: '-=5px',
            marginLeft: '-=5px'
        });
    });
});

So in a nutshell:

  1. I want the divs to remain on place when a div gets expanded
  2. I want that if the mouse remains 0.5 seconds on the div .user then the div should be expanded else nothing should happen.

Upvotes: 1

Views: 3883

Answers (1)

theftprevention
theftprevention

Reputation: 5213

This can be done purely in CSS3, and here's what you're looking for: Wrap each <div class="user"> in a <div class="userWrap">. Then, use the following CSS:

.userWrap {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 50px;
    overflow: visible;
    z-index: 1;
}
.userWrap:hover {
    z-index: 2;
}
.user {
    position: absolute;
    width: 300px;
    height: 50px;
    margin-bottom: 5px;
    background: #fff;
    transition: width 0.3s, height 0.3s;
}
.user:hover {
    width: 350px;
    height: 200px;
    background: #eee;
    transition: width 0.3s ease 0.5s, height 0.3s ease 0.5s;
}

To achieve the desired effect.

See a demo here.

Upvotes: 3

Related Questions