Откинуть меню при загрузке

Я попытался сделать JQuery. Когда вы нажимаете кнопку «Анимация высоты», тогда окно складывается. Но если я хочу избавиться от кнопок, значит, он будет складываться после fx 1 секунды автоматически, как я это сделаю? Я предполагаю, что мне нужно использовать onLoad где-нибудь, или мне нужно переписать весь код?Откинуть меню при загрузке

С наилучшими пожеланиями Мадс

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

<script> 
$(document).ready(function(){ 
    $("#btn1").click(function(){ 
     $("#box").animate({height: "300px" }); 
     $("#box").animate({width: "300px" }); 
    }); 

    $("#btn2").click(function(){ 
     $("#box").animate({height: "100px"}); 
     $("#box").animate({width: "100px" }); 
    }); 
}); 
</script> 
</head> 
<body> 

<button id="btn1">Animate height</button> 

<button id="btn2">Reset height</button> 

<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div> 

</body> 
</html>

РЕШЕНИЕ БЫЛО:

<script> 
$(document).ready(function(){ 
    setTimeout(function() { 
     $("#box").animate({height: "300px"}); 
     $("#box").animate({width: "300px"}); 
    }, 100); // the 1000 is the delay in milliseconds 
}); 
</script>

источник

2015-03-16 Anonymous

можно просто установить тайм-аут для запуска открытия анимации, как:

$(document).ready(function(){ 
    setTimeout(function() { 
     $("#box").animate({height: "300px", width: "300px"}); 
    }, 1000); // the 1000 is the delay in milliseconds 
});

источник

2015-03-16 12:45:15 atmd

Отлично благодарим за ответ. Он работает сейчас. Как и сейчас, ящик загружается из одного угла в другой. Что делать, если я хотел, чтобы ящик загружал вертикальную высоту, а затем ширину по горизонтали? –

@MadsKristensen: просто соедините вызовы функций: '$ (" # box "). Animate ({height:" 300px "}). Animate ({width:" 300px "});' –

Отличная благодарность и спасибо всем, кто помог здесь :-) best С уважением, Mads –

Вы можете попробовать как это: -

$.animate(action1).delay(n).animate(action2)

где п является Миллис задержки

т.е.

$(document).ready(function(){ 
      $("#box").delay(1000).animate({ height: "300px", width: "300px" }).delay(1000).animate({ height: "100px", width: "100px" }); 
     });

источник

2015-03-16 13:02:21

Вы можете использовать setTimeout для анимации, но также вы можете использовать свойство transition CSS. atmd дал вам пример для setTimeout, я приведу вам пример для transition. Попробуйте это:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
    width: 100px; 
    height: 100px; 
    background: red; 
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
    transition: width 2s; 
} 

div:hover { 
    width: 300px; 
} 
</style> 
</head> 
<body> 

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> 

<div></div> 

<p>Hover over the div element above, to see the transition effect.</p> 

</body> 
</html>

Взятые из here.

источник

2015-03-16 13:33:11

Откинуть меню при загрузке

ответ

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