JQuery: состояние загрузки при наведении курсора - PullRequest
Новая
       7

JQuery: состояние загрузки при наведении курсора

2 голосов
/ 30 января 2012

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

Делать что-то вроде: 

    $(".element").each(function() {
    $.data(this, 'size', { width: $(this).width(), height: $(this).height() });
}).hover(function() {
    $(this).stop().animate({ height: $.data(this,'size').height, 
                             width: $.data(this,'size').width });
}, function() {
    $(this).stop().animate({ height: 40, 
                             width: $.data(this,'size').width });
});

... работает, но при загрузке страницы элемент начинается на полную высоту.

Как лучше всего уменьшить его при загрузке страницы?

Ответы [ 3 ]

2 голосов
/ 30 января 2012

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

CSS: 

.div_small_height{
 height : 20px;
 width : 500px;
 background-color : red;
 overflow : hidden;
}
.div_full_height{
   width : 500px;
   background-color : blue;
}

Jquery: 

$(".element").addClass('div_small_height'); // shrink it on page load
 // change on mouseenter and mouse leave
$(".element").hover(function(){
    $(this).switchClass("div_small_height","div_full_height",500);
},function(){
    $(this).switchClass("div_full_height","div_small_height",500);
});

Пример скрипки: http://jsfiddle.net/7PV98/

0 голосов
/ 30 января 2012

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

Одна из возможных стратегий состоит в том, чтобы визуализировать объекты в их естественных размерах, но за пределами области просмотра - например, смещение -1000 пикселей по горизонтали. Захватите и сохраните их размеры, затем уменьшите их до фиксированной высоты 40 пикселей, а затем, наконец, верните их обратно в их обычные позиции в окне просмотра. Если все объекты находятся в каком-то элементе контейнера, вы можете просто сдвинуть этот элемент.

0 голосов
/ 30 января 2012

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

$(document).ready( function() {
   $('element').each( function() {
      //store height and width
       $.data(this, 'size', { width: $(this).width(), height: $(this).height() });
      //shrink it
      $(this).animate({ height: 40, width: $.data(this,'size').width });
   });
});

Мне было бы любопытно посмотреть, есть ли способ сделать это без анимации после загрузки.

...