expand div height onmouseover

Мне нужна высота на div 50px по умолчанию, и его нужно заменить на 300px onmouseover. Я сделал код ниже, чтобы реализовать его.expand div height onmouseover

<style type="text/css"> 
#div1{ 
height:50px; 
overflow:hidden; 
} 
#div1:hover{ 
height:300px; 
} 
</style> 
<body> 
<div id="div1"></div> 
</body>

Этот код работает нормально, но в соответствии с свойством CSS при наведении его немедленно изменяется его высота. Теперь мне нужен стильный способ, как медленно расширяться div onmouseover и сжиматься на выезде. Как расширить и списать div на зависание?

источник

2012-01-20 Mad coder.

Вы можете использовать JQuery. Использование функции анимации. См. Здесь http://api.jquery.com/animate/ – Undefined

Или вы можете использовать css-переходы (если они доступны). – biziclop

Есть несколько подходов - вот CSS и Jquery, который должен работать во всех браузерах, а не только современные из них:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 

    $("#div1").hover(
    //on mouseover 
    function() { 
     $(this).animate({ 
     height: '+=250' //adds 250px 
     }, 'slow' //sets animation speed to slow 
    ); 
    }, 
    //on mouseout 
    function() { 
     $(this).animate({ 
     height: '-=250px' //substracts 250px 
     }, 'slow' 
    ); 
    } 
); 

}); 
</script> 

<style type="text/css"> 
#div1{ 
    height:50px; 
    overflow:hidden; 
    background: red; /* just for demo */ 
} 
</style> 

<body> 
<div id="div1">This is div 1</div> 
</body>

источник

2012-01-20 16:57:25 Dustin

Лучше сначала прочитать первоначальную высоту, потому что, если вы изменяете высоту с помощью CSS, вам также нужно повторно редактировать JS, что не очень практично (например, можно забыть). – feeela

ОК, в этом случае «height:« + = 250 »следует просто установить на« height: «300px» « – Dustin

Извините, Dustin, этот код не работал :( –

В «современный» браузер, вы можете просто применить css transition effect:

#div1 { 
    -moz-transition: 4s all ease-in-out; 
    -ms-transition: 4s all ease-in-out; 
    -webkit-transition: 4s all ease-in-out; 
    -o-transition: 4s all ease-in-out; 
}

Это будет применяться эффект перехода в течение 4 секунд с ease-in-out ослабления совместимого светлячок, то есть, хром/Safari (WebKit) и операционный браузер. Подробнее:

CSS Transitions

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

BarFoos animations

источник

2012-01-20 16:45:39 jAndy

Вы можете использовать JQuery-х .animate() Это будет действовать на любом элементе с с классом «вкладки», и вернется на мыши-аут.

$('.tab').hover(function() { 
    $(this).stop() 
    $(this).animate({ 
     height: '+=250' 
     }, 500) 

     }, function() { 
    $(this).stop() 
    $(this).animate({ 
     height: '-=250' 
     }, 500)    
})

источник

2012-01-20 16:46:14

Спасибо! этот код работает нормально, но его выполнение на странице Load. Как выполнить этот код onmouseover? Прошу прощения за этот глупый вопрос, но я не знаю, как кодировать jQuery! –

Я отредактирую ответ. –

Извините, что говорите! это не сработало. Я попытался как ' 'и как вы сказали, я изменил div как

–

#div1{ 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
}

Легко!

источник

2012-01-20 16:46:15

Wow! awesome !, но как я могу уменьшить скорость скольжения? –

увеличить .3s до 1s например –

Спасибо! Я пробовал это, прежде чем вас спрашивали, но не нашел отличная разница, когда менялось от 3 до 10, поэтому я и спросил! В любом случае спасибо большое. –

Вы можете использовать JQuery-х .mouseoverhttp://api.jquery.com/mouseover/, .mouseouthttp://api.jquery.com/mouseout/ и .animate выполнить это.

На мероприятии .mouseover вы должны были бы оживить высоту 300px, а на мероприятии .mouseout вы бы ожили до 50px. Удостоверьтесь, что вы вызываете .stop на div перед тем, как вы вызываете анимацию, иначе у вас появятся странные проблемы.

источник

2012-01-20 16:46:34 Matthew

expand div height onmouseover

ответ

Смежные вопросы