Развернуть/сжать div на hover/out с помощью jQuery

Я ищу плагин jQuery для расширения элементов div, чтобы выявить их переполнение (если есть) при наведении указателя мыши. Иллюстрация:

Плагин должен работать с относительно позиционированным div (который, как я предполагаю, предполагает, что вы создаете копию div, установите его позиционирование в абсолютное, затем определите, куда его поместить).

Есть ли такой плагин, уже доступный там?

Ответ 1

Изображения здесь отсутствуют... но вот как я снял это несколько лет назад. Основная теория состоит в том, что все изображения /div независимо друг от друга являются абсолютными, внутри их собственной относительной области. Затем я анимирую позицию left & top как -negatively. Это заставляет их выступать над окружающими коробками и выглядеть так, как будто они появляются. (Конечно, вам также нужно убедиться, что z-индекс этого выше, чем те, что вокруг него).

jsFiddle DEMO

$(".img a img").hover(function() {
    $(this).closest(".img").css("z-index", 1);

    // this is where the popping out effect happens
    $(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");

}, function() {
    $(this).closest(".img").css("z-index", 0);
    $(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");
});

Стили, которые у меня есть для этих двух вещей:

.img { 
   position:relative; 
   z-index:0px;  
}

.img a img { 
   position:absolute;
   border:1px #1b346c solid; 
   background:#f1f1f1; 
   width:90px; 
   height:90px; 
}

Ответ 2

Вам не нужен плагин. Просто добавьте правильный css и используйте анимацию jQuery:

$div
.on('mouseenter', function(){
    $(this).animate({ margin: -10, width: "+=20", height: "+=20" });
})
.on('mouseleave', function(){
    $(this).animate({ margin: 0, width: "-=20", height: "-=20" });
})

демо здесь

Ответ 3

благодаря @MarkPieszak. Для динамически созданных элементов используйте

$(document).on({
  mouseenter: function () {
    $(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");
  },
  mouseleave: function () {
    $(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");
  }    
}, '.img a img');

.hover() работает только с статическими элементами. подробнее здесь

Ответ 4

Вы можете сделать это полностью с помощью css, это снайпер с моего сайта, который слишком ленив, чтобы отредактировать его, но вы поняли:

<ul class="hover">
  <li style="margin-top:40px;"">
   <a href=""><img src="images/Home/Home.jpg" alt="home" style="width:130px; height:100px;"/>
   <img src="images/Home/Home.jpg" alt="home" class="preview" style="width:180px; height:150px;"/></a>
  </li>
  <li style="margin-left:55px; margin-top:-20px;">
   <a href=""><img src="images/About/About.jpg" alt="About The Author" style="width:200px; height:200px;"/>
   <img src="images/About/About.jpg" alt="About The Author" class="preview" style="width:250px; height:250px;"/></a>
  </li>
</ul>

CSS

/* begin hover */

.hover{
cursor: default;
list-style: none;
}

.hover a .preview{
display: none;
}

.hover a:hover .preview{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}

.hover img{
background: white;
border-color: black;
border-style: solid;
border-width: 4px;
color: inherit;
padding: 2px;
vertical-align: top;
-moz-border-radius: 15px;
border-radius: 15px;
}

.hover li{
background: black;
border-color: black;
border-style: solid;
border-width: 1px;
color: inherit;
display: block;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}

.hover .preview{
border-color:black;
border-width:8px;
border-stle:solid;
}

li{
-moz-border-radius: 15px;
border-radius: 15px;
}

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